@progress/kendo-angular-dropdowns 14.4.0-develop.2 → 14.4.0-develop.20

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

@@ -1,12 +1,13 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, ViewChild, HostBinding, Directive, Injectable, HostListener, ViewChildren, InjectionToken, forwardRef, isDevMode, ViewContainerRef, Optional, Inject, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i9 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, isSafari, Keys, isChanged, hasObservers, KendoInput, anyChanged, guid as guid$1, ResizeSensorModule, EventsModule } from '@progress/kendo-angular-common';
-import * as i14 from '@angular/forms';
+import * as i7 from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isSafari, Keys, isChanged, closest as closest$1, hasObservers, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, anyChanged, guid as guid$1, ResizeSensorModule, EventsModule, AdornmentsModule } from '@progress/kendo-angular-common';
+export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective } from '@progress/kendo-angular-common';
+import * as i14$1 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { getter as getter$1, pointers, touchEnabled } from '@progress/kendo-common';
@@ -16,7 +17,7 @@ import { Subscription, merge, fromEvent, Subject, of, interval } from 'rxjs';
 import * as i2$1 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime, catchError, skipWhile, concatMap, takeUntil, debounceTime } from 'rxjs/operators';
-import * as i13 from '@angular/common';
+import * as i14 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { xIcon, caretAltDownIcon, searchIcon, xCircleIcon, plusIcon } from '@progress/kendo-svg-icons';
 import * as i2 from '@progress/kendo-angular-navigation';
@@ -25,7 +26,7 @@ import * as i4 from '@progress/kendo-angular-inputs';
 import { TextBoxModule } from '@progress/kendo-angular-inputs';
 import * as i3 from '@progress/kendo-angular-buttons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
-import * as i8 from '@progress/kendo-angular-icons';
+import * as i9 from '@progress/kendo-angular-icons';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$1 from '@progress/kendo-angular-treeview';
 import { DataBoundComponent, ExpandableComponent, FlatDataBindingDirective, HierarchyBindingDirective, ExpandDirective, TreeViewModule } from '@progress/kendo-angular-treeview';
@@ -37,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1703164530,
-    version: '14.4.0-develop.2',
+    publishDate: 1706519796,
+    version: '14.4.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -672,7 +673,7 @@ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [attr.aria-busy]="isLoading"
             [attr.aria-invalid]="formControl?.invalid"
         />
-   `, isInline: true, directives: [{ type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+   `, isInline: true, directives: [{ type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -2303,7 +2304,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </div>
     </div>
     </div>
-  `, isInline: true, components: [{ type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, components: [{ type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -2637,7 +2638,7 @@ ResponsiveRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </div>
             </ng-template>
         </kendo-actionsheet>
-    `, isInline: true, components: [{ type: i2.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i3.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i8.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }], directives: [{ type: i2.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]" }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i2.ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["title", "subtitle", "items", "cssClass", "animation", "expanded", "titleId"], outputs: ["expandedChange", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { type: i3.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i4.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i9.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }], directives: [{ type: i2.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ResponsiveRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -2828,6 +2829,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
 
+/**
+ * @hidden
+ */
+class SharedDropDownEventsDirective {
+    constructor(ngZone, renderer, cdr) {
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.isFocusedChange = new EventEmitter();
+        this.onFocus = new EventEmitter();
+        this.handleBlur = new EventEmitter();
+        this.subscriptions = new Subscription();
+    }
+    ngAfterViewInit() {
+        const hostElement = this.hostElement.nativeElement;
+        let cursorInsideWrapper = false;
+        let tabbing = false;
+        this.ngZone.runOutsideAngular(() => {
+            // focusIn and focusOut are relative to the host element
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusin', () => {
+                this.cdr.detectChanges();
+                if (!this.isFocused) {
+                    this.ngZone.run(() => {
+                        this.onFocus.emit();
+                        this.isFocused = true;
+                        this.isFocusedChange.emit(this.isFocused);
+                    });
+                }
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'focusout', (args) => {
+                if (!this.isFocused) {
+                    return;
+                }
+                if (tabbing) {
+                    const closestTextbox = closest$1(args.relatedTarget, (element) => element === hostElement);
+                    if (!closestTextbox) {
+                        this.handleBlur.emit();
+                    }
+                    tabbing = false;
+                }
+                else {
+                    if (!cursorInsideWrapper) {
+                        this.handleBlur.emit();
+                    }
+                }
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'mouseenter', () => {
+                cursorInsideWrapper = true;
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'mouseleave', () => {
+                cursorInsideWrapper = false;
+            }));
+            this.subscriptions.add(this.renderer.listen(hostElement, 'keydown', (args) => {
+                if (args.keyCode === Keys.Tab) {
+                    tabbing = true;
+                }
+                else {
+                    tabbing = false;
+                }
+            }));
+        });
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+}
+SharedDropDownEventsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedDropDownEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SharedDropDownEventsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedDropDownEventsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDropDownSharedEvents]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { hostElement: [{
+                type: Input
+            }], clearButtonClicked: [{
+                type: Input
+            }], isFocused: [{
+                type: Input
+            }], isFocusedChange: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], handleBlur: [{
+                type: Output
+            }] } });
+
 const NO_VALUE = "";
 const DEFAULT_SIZE$5 = 'medium';
 const DEFAULT_ROUNDED$5 = 'medium';
@@ -2918,7 +3006,7 @@ class AutoCompleteComponent {
          */
         this.clearButton = true;
         /**
-         * Sets the disabled state of the component.
+         * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_autocomplete#toc-managing-the-autocomplete-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -2975,6 +3063,14 @@ class AutoCompleteComponent {
          * Fires each time the AutoComplete gets blurred.
          */
         this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the user focuses the `input` element.
+         */
+        this.inputFocus = new EventEmitter();
+        /**
+         * Fires each time the `input` element gets blurred.
+         */
+        this.inputBlur = new EventEmitter();
         this.widgetClasses = true;
         this.listBoxId = `k-${guid()}`;
         this.optionPrefix = `k-${guid()}`;
@@ -3597,18 +3693,55 @@ class AutoCompleteComponent {
     /**
      * @hidden
      */
-    handleFocus() {
-        this.isFocused = true;
-        if (hasObservers(this.onFocus)) {
+    handleInputFocus() {
+        this.handleFocus();
+        if (hasObservers(this.inputFocus)) {
             this._zone.run(() => {
-                this.onFocus.emit();
+                this.inputFocus.emit();
             });
         }
     }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this._zone.run(() => {
+            if (!this.isFocused && hasObservers(this.onFocus)) {
+                this.onFocus.emit();
+            }
+            this.isFocused = true;
+        });
+    }
     /**
      * @hidden
      */
     handleBlur() {
+        if (!this.isActionSheetExpanded) {
+            this.isFocused = false;
+            const valueHasChanged = this.value !== this.text;
+            const runInZone = hasObservers(this.onBlur) ||
+                hasObservers(this.close) ||
+                isUntouched(this.wrapper) ||
+                valueHasChanged;
+            if (runInZone) {
+                this._zone.run(() => {
+                    if (valueHasChanged) {
+                        this.change(this.searchbar.value);
+                    }
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                    this.togglePopup(false);
+                });
+            }
+            else {
+                this.togglePopup(false);
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleInputBlur() {
         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
@@ -3626,9 +3759,8 @@ class AutoCompleteComponent {
             if (!exactMatch && insensitiveMatch) {
                 this.selectionService.resetSelection([]);
             }
-            this.isFocused = false;
             const valueHasChanged = this.value !== this.text;
-            const runInZone = hasObservers(this.onBlur) ||
+            const runInZone = hasObservers(this.inputBlur) ||
                 hasObservers(this.close) ||
                 isUntouched(this.wrapper) ||
                 valueHasChanged ||
@@ -3638,7 +3770,7 @@ class AutoCompleteComponent {
                     if (valueHasChanged) {
                         this.change(this.searchbar.value);
                     }
-                    this.onBlur.emit();
+                    this.inputBlur.emit();
                     this.onTouchedCallback();
                     this.togglePopup(false);
                 });
@@ -3862,7 +3994,7 @@ class AutoCompleteComponent {
     }
 }
 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: [
+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", inputFocus: "inputFocus", inputBlur: "inputBlur" }, 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,
         SelectionService,
@@ -3881,7 +4013,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: KendoInput,
             useExisting: forwardRef(() => AutoCompleteComponent)
         }
-    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoAutoComplete"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoAutoCompleteLocalizedMessages
             i18n-noDataText="kendo.autocomplete.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -3893,44 +4025,64 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             popupLabel="Options list"
         >
         </ng-container>
-        <kendo-searchbar #searchbar
-            [role]="'combobox'"
-            [ariaExpanded]="isOpen"
-            [isSuggestable]="suggest"
-            [isFilterable]="filterable"
-            [isLoading]="isLoading"
-            [ariaControls]="ariaControls"
-            [id]="focusableId"
-            [activeDescendant]="activeDescendant"
-            [userInput]="text"
-            [suggestedText]="suggestion"
-            [disabled]="disabled"
-            [readonly]="readonly || this.isAdaptive"
-            [tabIndex]="tabIndex"
-            [placeholder]="placeholder"
-            (onNavigate)="handleNavigate($event)"
-            (valueChange)="searchBarChange($event)"
-            (onBlur)="handleBlur()"
+
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
             (onFocus)="handleFocus()"
-            (click)="handleClick()"
-        ></kendo-searchbar>
-        <span
-            *ngIf="!loading && !readonly && (clearButton && text?.length)"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            [attr.title]="messageFor('clearTitle')"
-            role="button"
-            tabindex="-1"
-            (click)="clearValue($event)"
-            (mousedown)="$event.preventDefault()"
         >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
+            <kendo-searchbar #searchbar
+                [role]="'combobox'"
+                [ariaExpanded]="isOpen"
+                [isSuggestable]="suggest"
+                [isFilterable]="filterable"
+                [isLoading]="isLoading"
+                [ariaControls]="ariaControls"
+                [id]="focusableId"
+                [activeDescendant]="activeDescendant"
+                [userInput]="text"
+                [suggestedText]="suggestion"
+                [disabled]="disabled"
+                [readonly]="readonly || this.isAdaptive"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            ></kendo-searchbar>
+            <span
+                *ngIf="!loading && !readonly && (clearButton && text?.length)"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                [attr.title]="messageFor('clearTitle')"
+                role="button"
+                tabindex="-1"
+                (click)="clearValue($event)"
+                (mousedown)="$event.preventDefault()"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
+                <kendo-icon-wrapper
+                    name="x"
+                    [svgIcon]="xIcon"
+                >
+                </kendo-icon-wrapper>
+            </span>
+            <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
+            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
         <ng-template #popupTemplate>
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
@@ -3996,7 +4148,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: 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: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: 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: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: 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: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -4034,44 +4186,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             popupLabel="Options list"
         >
         </ng-container>
-        <kendo-searchbar #searchbar
-            [role]="'combobox'"
-            [ariaExpanded]="isOpen"
-            [isSuggestable]="suggest"
-            [isFilterable]="filterable"
-            [isLoading]="isLoading"
-            [ariaControls]="ariaControls"
-            [id]="focusableId"
-            [activeDescendant]="activeDescendant"
-            [userInput]="text"
-            [suggestedText]="suggestion"
-            [disabled]="disabled"
-            [readonly]="readonly || this.isAdaptive"
-            [tabIndex]="tabIndex"
-            [placeholder]="placeholder"
-            (onNavigate)="handleNavigate($event)"
-            (valueChange)="searchBarChange($event)"
-            (onBlur)="handleBlur()"
+
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
             (onFocus)="handleFocus()"
-            (click)="handleClick()"
-        ></kendo-searchbar>
-        <span
-            *ngIf="!loading && !readonly && (clearButton && text?.length)"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            [attr.title]="messageFor('clearTitle')"
-            role="button"
-            tabindex="-1"
-            (click)="clearValue($event)"
-            (mousedown)="$event.preventDefault()"
         >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
+            <kendo-searchbar #searchbar
+                [role]="'combobox'"
+                [ariaExpanded]="isOpen"
+                [isSuggestable]="suggest"
+                [isFilterable]="filterable"
+                [isLoading]="isLoading"
+                [ariaControls]="ariaControls"
+                [id]="focusableId"
+                [activeDescendant]="activeDescendant"
+                [userInput]="text"
+                [suggestedText]="suggestion"
+                [disabled]="disabled"
+                [readonly]="readonly || this.isAdaptive"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            ></kendo-searchbar>
+            <span
+                *ngIf="!loading && !readonly && (clearButton && text?.length)"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                [attr.title]="messageFor('clearTitle')"
+                role="button"
+                tabindex="-1"
+                (click)="clearValue($event)"
+                (mousedown)="$event.preventDefault()"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
+                <kendo-icon-wrapper
+                    name="x"
+                    [svgIcon]="xIcon"
+                >
+                </kendo-icon-wrapper>
+            </span>
+            <span *ngIf="loading" class="k-icon k-i-loading k-input-loading-icon"></span>
+            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
         <ng-template #popupTemplate>
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
@@ -4216,6 +4388,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
             }], template: [{
                 type: ContentChild,
                 args: [ItemTemplateDirective, { static: false }]
@@ -4234,6 +4410,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], fixedGroupTemplate: [{
                 type: ContentChild,
                 args: [FixedGroupTemplateDirective, { static: false }]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: [SuffixTemplateDirective]
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: [PrefixTemplateDirective]
             }], container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
@@ -4350,7 +4532,7 @@ const DEFAULT_FILL_MODE$4 = 'solid';
  * ```
  */
 class ComboBoxComponent {
-    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, touchEnabled, injector) {
+    constructor(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, cdr, renderer, touchEnabled, injector, hostElement) {
         this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
@@ -4363,6 +4545,7 @@ class ComboBoxComponent {
         this.renderer = renderer;
         this.touchEnabled = touchEnabled;
         this.injector = injector;
+        this.hostElement = hostElement;
         /**
          * @hidden
          */
@@ -4462,7 +4645,7 @@ class ComboBoxComponent {
          */
         this.clearButton = true;
         /**
-         * Sets the disabled state of the component.
+         * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the articles on [ComboBox Forms Support](slug:slug:formssupport_combobox#toc-managing-the-combobox-disabled-state-in-reactive-forms) and [MultiColumnComboBox Forms Support](slug:formssupport_multicolumncombobox#toc-managing-the-multicolumncombobox-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -4524,6 +4707,14 @@ class ComboBoxComponent {
          * Fires each time the ComboBox gets blurred.
          */
         this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the user focuses the `input` element.
+         */
+        this.inputFocus = new EventEmitter();
+        /**
+         * Fires each time the `input` element gets blurred.
+         */
+        this.inputBlur = new EventEmitter();
         this.widgetClasses = true;
         this._isFocused = false;
         /**
@@ -5421,6 +5612,17 @@ class ComboBoxComponent {
             }
         }
     }
+    /**
+     * @hidden
+     */
+    handleFocus() {
+        this.zone.run(() => {
+            if (!this.isFocused && hasObservers(this.onFocus)) {
+                this.onFocus.emit();
+            }
+            this.isFocused = true;
+        });
+    }
     /**
      * @hidden
      */
@@ -5433,6 +5635,42 @@ 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);
+            if (runInZone) {
+                this.zone.run(() => {
+                    if (valueHasChanged) {
+                        const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
+                        if (lowerCaseMatch || unresolvedSelection) {
+                            this.selectionService.change(this.selectionService.focused);
+                        }
+                        else {
+                            this.change(currentText, true);
+                        }
+                    }
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                    this.togglePopup(false);
+                });
+            }
+            else {
+                this.togglePopup(false);
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleInputBlur() {
+        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
+            const unresolvedSelection = getter(this.dataItem, this.valueField) !== getter(this.value, this.valueField);
+            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) ||
@@ -5449,7 +5687,7 @@ class ComboBoxComponent {
                             this.change(currentText, true);
                         }
                     }
-                    this.onBlur.emit();
+                    this.inputBlur.emit();
                     this.onTouchedCallback();
                     this.togglePopup(false);
                 });
@@ -5500,10 +5738,10 @@ class ComboBoxComponent {
     /**
      * @hidden
      */
-    handleFocus() {
-        this.isFocused = true;
-        if (hasObservers(this.onFocus)) {
-            this.zone.run(() => this.onFocus.emit());
+    handleInputFocus() {
+        this.handleFocus();
+        if (hasObservers(this.inputFocus)) {
+            this.zone.run(() => this.inputFocus.emit());
         }
     }
     /**
@@ -5535,6 +5773,7 @@ class ComboBoxComponent {
     selectClick() {
         if (!this.touchEnabled) {
             this.searchbar.focus();
+            this.isFocused = true;
         }
         if (!this.isOpen) {
             this.restoreItemFocus();
@@ -5736,8 +5975,8 @@ 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 }, { 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: [
+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 }, { token: i0.ElementRef }], 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", inputFocus: "inputFocus", inputBlur: "inputBlur" }, 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,
         SelectionService,
@@ -5754,7 +5993,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
         {
             provide: KendoInput, useExisting: forwardRef(() => ComboBoxComponent)
         }
-    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], exportAs: ["kendoComboBox"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true, static: true }], exportAs: ["kendoComboBox"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoComboBoxLocalizedMessages
             i18n-noDataText="kendo.combobox.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -5769,64 +6008,84 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             popupLabel="Options list"
         >
         </ng-container>
-        <kendo-searchbar #searchbar
-            [role]="'combobox'"
-            [ariaExpanded]="isOpen"
-            [ariaControls]="ariaControls"
-            [id]="focusableId"
-            [isLoading]="loading"
-            [isSuggestable]="suggest"
-            [isFilterable]="filterable"
-            [activeDescendant]="activeDescendant"
-            [userInput]="text"
-            [suggestedText]="getSuggestion()"
-            [disabled]="disabled"
-            [readonly]="readonly || isAdaptive"
-            [tabIndex]="tabIndex"
-            [placeholder]="placeholder"
-            (onNavigate)="handleNavigate($event)"
-            (valueChange)="searchBarChange($event)"
-            (onBlur)="handleBlur()"
+
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
             (onFocus)="handleFocus()"
-            (click)="handleClick()"
-        ></kendo-searchbar>
-        <span
-            *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            aria-hidden="true"
-            [attr.title]="messageFor('clearTitle')"
-            (click)="clearValue($event)"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
         >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
+            <kendo-searchbar #searchbar
+                [role]="'combobox'"
+                [ariaExpanded]="isOpen"
+                [ariaControls]="ariaControls"
+                [id]="focusableId"
+                [isLoading]="loading"
+                [isSuggestable]="suggest"
+                [isFilterable]="filterable"
+                [activeDescendant]="activeDescendant"
+                [userInput]="text"
+                [suggestedText]="getSuggestion()"
+                [disabled]="disabled"
+                [readonly]="readonly || isAdaptive"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            ></kendo-searchbar>
+            <span
+                *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                aria-hidden="true"
+                [attr.title]="messageFor('clearTitle')"
+                (click)="clearValue($event)"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
-        <button
-            #select
-            tabindex="-1"
-            unselectable="on"
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [ngClass]="selectButtonClasses"
-            [attr.aria-label]="messageFor('selectButtonText')"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
-        >
-            <kendo-icon-wrapper
-                [name]="icon || 'caret-alt-down'"
-                innerCssClass="k-button-icon"
-                [svgIcon]="svgIcon || caretAltDownIcon"
+                <kendo-icon-wrapper
+                    name="x"
+                    [svgIcon]="xIcon"
+                >
+                </kendo-icon-wrapper>
+            </span>
+            <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
+            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <button
+                #select
+                tabindex="-1"
+                unselectable="on"
+                type="button"
+                class="k-input-button k-button k-icon-button"
+                [ngClass]="selectButtonClasses"
+                [attr.aria-label]="messageFor('selectButtonText')"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
             >
-            </kendo-icon-wrapper>
-        </button>
+                <kendo-icon-wrapper
+                    [name]="icon || 'caret-alt-down'"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="svgIcon || caretAltDownIcon"
+                >
+                </kendo-icon-wrapper>
+            </button>
+        </ng-container>
+
         <ng-template #popupTemplate>
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
@@ -5891,7 +6150,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: 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: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: 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: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: 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: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -5930,64 +6189,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             popupLabel="Options list"
         >
         </ng-container>
-        <kendo-searchbar #searchbar
-            [role]="'combobox'"
-            [ariaExpanded]="isOpen"
-            [ariaControls]="ariaControls"
-            [id]="focusableId"
-            [isLoading]="loading"
-            [isSuggestable]="suggest"
-            [isFilterable]="filterable"
-            [activeDescendant]="activeDescendant"
-            [userInput]="text"
-            [suggestedText]="getSuggestion()"
-            [disabled]="disabled"
-            [readonly]="readonly || isAdaptive"
-            [tabIndex]="tabIndex"
-            [placeholder]="placeholder"
-            (onNavigate)="handleNavigate($event)"
-            (valueChange)="searchBarChange($event)"
-            (onBlur)="handleBlur()"
+
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
             (onFocus)="handleFocus()"
-            (click)="handleClick()"
-        ></kendo-searchbar>
-        <span
-            *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            aria-hidden="true"
-            [attr.title]="messageFor('clearTitle')"
-            (click)="clearValue($event)"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
         >
-            <kendo-icon-wrapper
-                name="x"
-                [svgIcon]="xIcon"
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
+            <kendo-searchbar #searchbar
+                [role]="'combobox'"
+                [ariaExpanded]="isOpen"
+                [ariaControls]="ariaControls"
+                [id]="focusableId"
+                [isLoading]="loading"
+                [isSuggestable]="suggest"
+                [isFilterable]="filterable"
+                [activeDescendant]="activeDescendant"
+                [userInput]="text"
+                [suggestedText]="getSuggestion()"
+                [disabled]="disabled"
+                [readonly]="readonly || isAdaptive"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            ></kendo-searchbar>
+            <span
+                *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                aria-hidden="true"
+                [attr.title]="messageFor('clearTitle')"
+                (click)="clearValue($event)"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
-        <button
-            #select
-            tabindex="-1"
-            unselectable="on"
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [ngClass]="selectButtonClasses"
-            [attr.aria-label]="messageFor('selectButtonText')"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
-        >
-            <kendo-icon-wrapper
-                [name]="icon || 'caret-alt-down'"
-                innerCssClass="k-button-icon"
-                [svgIcon]="svgIcon || caretAltDownIcon"
+                <kendo-icon-wrapper
+                    name="x"
+                    [svgIcon]="xIcon"
+                >
+                </kendo-icon-wrapper>
+            </span>
+            <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
+            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <button
+                #select
+                tabindex="-1"
+                unselectable="on"
+                type="button"
+                class="k-input-button k-button k-icon-button"
+                [ngClass]="selectButtonClasses"
+                [attr.aria-label]="messageFor('selectButtonText')"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
             >
-            </kendo-icon-wrapper>
-        </button>
+                <kendo-icon-wrapper
+                    [name]="icon || 'caret-alt-down'"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="svgIcon || caretAltDownIcon"
+                >
+                </kendo-icon-wrapper>
+            </button>
+        </ng-container>
+
         <ng-template #popupTemplate>
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
@@ -6059,7 +6338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }, { type: i0.Injector }]; }, propDecorators: { icon: [{
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { icon: [{
                 type: Input
             }], svgIcon: [{
                 type: Input
@@ -6143,6 +6422,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
             }], template: [{
                 type: ContentChild,
                 args: [ItemTemplateDirective, { static: false }]
@@ -6161,6 +6444,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], fixedGroupTemplate: [{
                 type: ContentChild,
                 args: [FixedGroupTemplateDirective, { static: false }]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: [SuffixTemplateDirective]
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: [PrefixTemplateDirective]
             }], container: [{
                 type: ViewChild,
                 args: ['container', { read: ViewContainerRef, static: true }]
@@ -7793,7 +8082,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ 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: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.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: 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: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: 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: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14$1.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: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: 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: [{
@@ -8459,7 +8748,7 @@ TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             </span>
         </div>
         <ng-content></ng-content>
-  `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TagListComponent, decorators: [{
             type: Component,
             args: [{
@@ -8591,7 +8880,7 @@ const DEFAULT_FILL_MODE$2 = 'solid';
  * ```
  */
 class MultiSelectComponent {
-    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled, injector) {
+    constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, touchEnabled, injector, hostElement) {
         this.wrapper = wrapper;
         this.localization = localization;
         this.popupService = popupService;
@@ -8605,6 +8894,7 @@ class MultiSelectComponent {
         this._zone = _zone;
         this.touchEnabled = touchEnabled;
         this.injector = injector;
+        this.hostElement = hostElement;
         /**
          * @hidden
          */
@@ -8651,7 +8941,7 @@ class MultiSelectComponent {
          */
         this.title = '';
         /**
-         * Sets the disabled state of the component.
+         * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_multiselect#toc-managing-the-multiselect-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -8781,6 +9071,14 @@ class MultiSelectComponent {
          * Fires each time the MultiSelect gets blurred.
          */
         this.onBlur = new EventEmitter();
+        /**
+         * Fires each time the user focuses the `input` element.
+         */
+        this.inputFocus = new EventEmitter();
+        /**
+         * Fires each time the `input` element gets blurred.
+         */
+        this.inputBlur = new EventEmitter();
         /**
          * Fires each time a tag is about to be removed([see examples]({% slug summarytagmode_multiselecttree %}#toc-notifying-on-removing-group-tags)).
          * This event is preventable. If you cancel it, the tag will not be removed.
@@ -8865,14 +9163,12 @@ class MultiSelectComponent {
     /**
      * @hidden
      */
-    onSearchBarFocus() {
-        if (!this.isFocused) {
-            this.isFocused = true;
-            if (hasObservers(this.onFocus)) {
-                this._zone.run(() => {
-                    this.onFocus.emit();
-                });
-            }
+    handleInputFocus() {
+        this.handleFocus();
+        if (hasObservers(this.inputFocus)) {
+            this._zone.run(() => {
+                this.inputFocus.emit();
+            });
         }
     }
     /**
@@ -8896,13 +9192,53 @@ class MultiSelectComponent {
     /**
      * @hidden
      */
-    onSearchBarBlur() {
+    handleFocus() {
+        this._zone.run(() => {
+            if (!this.isFocused && hasObservers(this.onFocus)) {
+                this.onFocus.emit();
+            }
+            this.isFocused = true;
+        });
+    }
+    /**
+     * @hidden
+     */
+    handleBlur() {
         if (!this.isActionSheetExpanded) {
             if (!this.isFocused) {
                 return;
             }
             this.isFocused = false;
             if (hasObservers(this.onBlur) ||
+                hasObservers(this.filterChange) ||
+                hasObservers(this.close) ||
+                isUntouched(this.wrapper.nativeElement)) {
+                this._zone.run(() => {
+                    this.closePopup();
+                    if (!(this.isOpen && this.allowCustom)) {
+                        this.clearFilter();
+                    }
+                    this.onBlur.emit();
+                    this.onTouchedCallback();
+                });
+            }
+            else {
+                if (!this.allowCustom) {
+                    this.clearFilter();
+                }
+                this.closePopup();
+            }
+        }
+    }
+    /**
+     * @hidden
+     */
+    handleInputBlur() {
+        if (!this.isActionSheetExpanded) {
+            if (!this.isFocused) {
+                return;
+            }
+            if (hasObservers(this.inputBlur) ||
                 hasObservers(this.filterChange) ||
                 hasObservers(this.close) ||
                 isUntouched(this.wrapper.nativeElement) ||
@@ -8912,7 +9248,7 @@ class MultiSelectComponent {
                     if (!(this.isOpen && this.allowCustom)) {
                         this.clearFilter();
                     }
-                    this.onBlur.emit();
+                    this.inputBlur.emit();
                     this.onTouchedCallback();
                 });
             }
@@ -9538,7 +9874,7 @@ class MultiSelectComponent {
         this.windowSize = windowSize();
         this.cdr.detectChanges();
         this.searchbar.setInputSize();
-        this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
+        this.subs.add(this.renderer.listen(this.searchbar.input.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
         this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
         if (this.actionSheet && isDocumentAvailable()) {
             // The following syntax is used as it does not violate CSP compliance
@@ -10194,8 +10530,8 @@ 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 }, { 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: [
+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 }, { token: i0.ElementRef }], 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", inputFocus: "inputFocus", inputBlur: "inputBlur", 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,
         SelectionService,
@@ -10212,7 +10548,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         {
             provide: KendoInput, useExisting: forwardRef(() => MultiSelectComponent)
         }
-    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: CustomItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoMultiSelect"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "template", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "customItemTemplate", first: true, predicate: CustomItemTemplateDirective, descendants: true }, { propertyName: "groupTemplate", first: true, predicate: GroupTemplateDirective, descendants: true }, { propertyName: "fixedGroupTemplate", first: true, predicate: FixedGroupTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "tagTemplate", first: true, predicate: TagTemplateDirective, descendants: true }, { propertyName: "groupTagTemplate", first: true, predicate: GroupTagTemplateDirective, descendants: true }, { propertyName: "noDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "suffixTemplate", first: true, predicate: SuffixTemplateDirective, descendants: true }, { propertyName: "prefixTemplate", first: true, predicate: PrefixTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "responsiveRendererComponent", first: true, predicate: ResponsiveRendererComponent, descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "searchbar", first: true, predicate: SearchBarComponent, descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }], exportAs: ["kendoMultiSelect"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoMultiSelectLocalizedMessages
             i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
@@ -10230,69 +10566,89 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             cancelButton="Cancel"
         >
         </ng-container>
-        <div class="k-input-values">
-            <kendo-taglist
-                [size]="size"
-                [rounded]="rounded"
-                [fillMode]="fillMode"
-                [id]="tagListId"
-                [tags]="tags"
-                [textField]="textField"
-                [valueField]="valueField"
-                [focused]="focusedTagIndex"
-                [disabled]="disabled"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [tagPrefix]="tagPrefix"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
-            <kendo-searchbar
-                #searchbar
-                [ariaExpanded]="isOpen"
-                [ariaControls]="ariaControls"
-                [id]="focusableId"
-                [role]="'combobox'"
-                [tagListId]="tagListId"
-                [isLoading]="loading"
-                [isFilterable]="filterable"
-                [activeDescendant]="activeDescendant"
-                [userInput]="text"
-                [disabled]="disabled"
-                [readonly]="readonly || this.isAdaptive"
-                [tabIndex]="tabIndex"
-                [placeholder]="placeholder"
-                (onNavigate)="handleNavigate($event)"
-                (valueChange)="handleFilter($event)"
-                (onBlur)="onSearchBarBlur()"
-                (onFocus)="onSearchBarFocus()"
-                (click)="handleClick()"
-            >
-            </kendo-searchbar>
-        </div>
 
-        <span
-            *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            [attr.title]="messageFor('clearTitle')"
-            role="button"
-            tabindex="-1"
-            (mousedown)="clearAll($event)"
-        >
-            <kendo-icon-wrapper
-                class="k-icon"
-                name="x"
-                [svgIcon]="xIcon"
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
+        >
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
+            <div class="k-input-values">
+                <kendo-taglist
+                    [size]="size"
+                    [rounded]="rounded"
+                    [fillMode]="fillMode"
+                    [id]="tagListId"
+                    [tags]="tags"
+                    [textField]="textField"
+                    [valueField]="valueField"
+                    [focused]="focusedTagIndex"
+                    [disabled]="disabled"
+                    [template]="tagTemplate"
+                    [groupTemplate]="groupTagTemplate"
+                    [tagPrefix]="tagPrefix"
+                    [disabledIndices]="disabledIndices"
+                    (removeTag)="handleRemoveTag($event)"
+                >
+                </kendo-taglist>
+                <kendo-searchbar
+                    #searchbar
+                    [ariaExpanded]="isOpen"
+                    [ariaControls]="ariaControls"
+                    [id]="focusableId"
+                    [role]="'combobox'"
+                    [tagListId]="tagListId"
+                    [isLoading]="loading"
+                    [isFilterable]="filterable"
+                    [activeDescendant]="activeDescendant"
+                    [userInput]="text"
+                    [disabled]="disabled"
+                    [readonly]="readonly || this.isAdaptive"
+                    [tabIndex]="tabIndex"
+                    [placeholder]="placeholder"
+                    (onNavigate)="handleNavigate($event)"
+                    (valueChange)="handleFilter($event)"
+                    (onBlur)="handleInputBlur()"
+                    (onFocus)="handleInputFocus()"
+                    (click)="handleClick()"
+                >
+                </kendo-searchbar>
+            </div>
+
+            <span
+                *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                [attr.title]="messageFor('clearTitle')"
+                role="button"
+                tabindex="-1"
+                (mousedown)="clearAll($event)"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span
-            *ngIf="loading"
-            class="k-icon k-i-loading k-input-loading-icon"
-        >
-        </span>
+                <kendo-icon-wrapper
+                    class="k-icon"
+                    name="x"
+                    [svgIcon]="xIcon"
+                >
+                </kendo-icon-wrapper>
+            </span>
+            <span
+                *ngIf="loading"
+                class="k-icon k-i-loading k-input-loading-icon"
+            >
+            </span>
+            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
         <ng-template #popupTemplate>
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
@@ -10387,7 +10743,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: 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: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: 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: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: 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: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: 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: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -10429,69 +10785,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             cancelButton="Cancel"
         >
         </ng-container>
-        <div class="k-input-values">
-            <kendo-taglist
-                [size]="size"
-                [rounded]="rounded"
-                [fillMode]="fillMode"
-                [id]="tagListId"
-                [tags]="tags"
-                [textField]="textField"
-                [valueField]="valueField"
-                [focused]="focusedTagIndex"
-                [disabled]="disabled"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [tagPrefix]="tagPrefix"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
-            <kendo-searchbar
-                #searchbar
-                [ariaExpanded]="isOpen"
-                [ariaControls]="ariaControls"
-                [id]="focusableId"
-                [role]="'combobox'"
-                [tagListId]="tagListId"
-                [isLoading]="loading"
-                [isFilterable]="filterable"
-                [activeDescendant]="activeDescendant"
-                [userInput]="text"
-                [disabled]="disabled"
-                [readonly]="readonly || this.isAdaptive"
-                [tabIndex]="tabIndex"
-                [placeholder]="placeholder"
-                (onNavigate)="handleNavigate($event)"
-                (valueChange)="handleFilter($event)"
-                (onBlur)="onSearchBarBlur()"
-                (onFocus)="onSearchBarFocus()"
-                (click)="handleClick()"
-            >
-            </kendo-searchbar>
-        </div>
 
-        <span
-            *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            [attr.title]="messageFor('clearTitle')"
-            role="button"
-            tabindex="-1"
-            (mousedown)="clearAll($event)"
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
+            (onFocus)="handleFocus()"
         >
-            <kendo-icon-wrapper
-                class="k-icon"
-                name="x"
-                [svgIcon]="xIcon"
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
+            <div class="k-input-values">
+                <kendo-taglist
+                    [size]="size"
+                    [rounded]="rounded"
+                    [fillMode]="fillMode"
+                    [id]="tagListId"
+                    [tags]="tags"
+                    [textField]="textField"
+                    [valueField]="valueField"
+                    [focused]="focusedTagIndex"
+                    [disabled]="disabled"
+                    [template]="tagTemplate"
+                    [groupTemplate]="groupTagTemplate"
+                    [tagPrefix]="tagPrefix"
+                    [disabledIndices]="disabledIndices"
+                    (removeTag)="handleRemoveTag($event)"
+                >
+                </kendo-taglist>
+                <kendo-searchbar
+                    #searchbar
+                    [ariaExpanded]="isOpen"
+                    [ariaControls]="ariaControls"
+                    [id]="focusableId"
+                    [role]="'combobox'"
+                    [tagListId]="tagListId"
+                    [isLoading]="loading"
+                    [isFilterable]="filterable"
+                    [activeDescendant]="activeDescendant"
+                    [userInput]="text"
+                    [disabled]="disabled"
+                    [readonly]="readonly || this.isAdaptive"
+                    [tabIndex]="tabIndex"
+                    [placeholder]="placeholder"
+                    (onNavigate)="handleNavigate($event)"
+                    (valueChange)="handleFilter($event)"
+                    (onBlur)="handleInputBlur()"
+                    (onFocus)="handleInputFocus()"
+                    (click)="handleClick()"
+                >
+                </kendo-searchbar>
+            </div>
+
+            <span
+                *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                [attr.title]="messageFor('clearTitle')"
+                role="button"
+                tabindex="-1"
+                (mousedown)="clearAll($event)"
             >
-            </kendo-icon-wrapper>
-        </span>
-        <span
-            *ngIf="loading"
-            class="k-icon k-i-loading k-input-loading-icon"
-        >
-        </span>
+                <kendo-icon-wrapper
+                    class="k-icon"
+                    name="x"
+                    [svgIcon]="xIcon"
+                >
+                </kendo-icon-wrapper>
+            </span>
+            <span
+                *ngIf="loading"
+                class="k-icon k-i-loading k-input-loading-icon"
+            >
+            </span>
+            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+        </ng-container>
+
         <ng-template #popupTemplate>
             <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
         </ng-template>
@@ -10593,7 +10969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }, {
                     type: Inject,
                     args: [TOUCH_ENABLED]
-                }] }, { type: i0.Injector }]; }, propDecorators: { responsiveRendererComponent: [{
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { responsiveRendererComponent: [{
                 type: ViewChild,
                 args: [ResponsiveRendererComponent]
             }], showStickyHeader: [{
@@ -10675,6 +11051,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], onBlur: [{
                 type: Output,
                 args: ['blur']
+            }], inputFocus: [{
+                type: Output
+            }], inputBlur: [{
+                type: Output
             }], removeTag: [{
                 type: Output
             }], container: [{
@@ -10716,6 +11096,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], noDataTemplate: [{
                 type: ContentChild,
                 args: [NoDataTemplateDirective, { static: false }]
+            }], suffixTemplate: [{
+                type: ContentChild,
+                args: [SuffixTemplateDirective]
+            }], prefixTemplate: [{
+                type: ContentChild,
+                args: [PrefixTemplateDirective]
             }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-multiselect']
@@ -10885,8 +11271,9 @@ 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, injector) {
-        super(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled, injector);
+    constructor(localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, wrapper, touchEnabled, injector, hostElement) {
+        super(wrapper, localization, popupService, selectionService, navigationService, disabledItemsService, dataService, zone, changeDetector, renderer, touchEnabled, injector, hostElement);
+        this.hostElement = hostElement;
         /**
          * @hidden
          */
@@ -11009,7 +11396,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 }, { token: i0.Injector }], 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 }, { token: i0.ElementRef }], 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,
@@ -11050,65 +11437,84 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             "
             popupLabel="Options list"
         ></ng-container>
-        <kendo-searchbar
-            #searchbar
-            [role]="'combobox'"
-            [ariaExpanded]="isOpen"
-            [ariaControls]="ariaControls"
-            [id]="focusableId"
-            [isLoading]="loading"
-            [isSuggestable]="suggest"
-            [isFilterable]="filterable"
-            [activeDescendant]="activeDescendant"
-            [userInput]="text"
-            [suggestedText]="getSuggestion()"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [tabIndex]="tabIndex"
-            [placeholder]="placeholder"
-            (onNavigate)="handleNavigate($event)"
-            (valueChange)="searchBarChange($event)"
-            (onBlur)="handleBlur()"
+
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
             (onFocus)="handleFocus()"
-            (click)="handleClick()"
         >
-        </kendo-searchbar>
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
+            <kendo-searchbar
+                #searchbar
+                [role]="'combobox'"
+                [ariaExpanded]="isOpen"
+                [ariaControls]="ariaControls"
+                [id]="focusableId"
+                [isLoading]="loading"
+                [isSuggestable]="suggest"
+                [isFilterable]="filterable"
+                [activeDescendant]="activeDescendant"
+                [userInput]="text"
+                [suggestedText]="getSuggestion()"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            >
+            </kendo-searchbar>
 
-        <span
-            *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && text?.length"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            aria-hidden="true"
-            [attr.title]="messageFor('clearTitle')"
-            (click)="clearValue($event)"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
-        >
-            <kendo-icon-wrapper name="x" [svgIcon]="xIcon"> </kendo-icon-wrapper>
-        </span>
+            <span
+                *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && text?.length"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                aria-hidden="true"
+                [attr.title]="messageFor('clearTitle')"
+                (click)="clearValue($event)"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
+            >
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"> </kendo-icon-wrapper>
+            </span>
 
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
-        <button
-            #select
-            tabindex="-1"
-            aria-hidden="true"
-            unselectable="on"
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [ngClass]="selectButtonClasses"
-            [attr.aria-label]="messageFor('selectButtonText')"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
-        >
-            <kendo-icon-wrapper
-                [name]="icon || 'caret-alt-down'"
-                innerCssClass="k-button-icon"
-                [svgIcon]="svgIcon || caretAltDownIcon"
+            <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
+            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <button
+                #select
+                tabindex="-1"
+                aria-hidden="true"
+                unselectable="on"
+                type="button"
+                class="k-input-button k-button k-icon-button"
+                [ngClass]="selectButtonClasses"
+                [attr.aria-label]="messageFor('selectButtonText')"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
             >
-            </kendo-icon-wrapper>
-        </button>
+                <kendo-icon-wrapper
+                    [name]="icon || 'caret-alt-down'"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="svgIcon || caretAltDownIcon"
+                >
+                </kendo-icon-wrapper>
+            </button>
+        </ng-container>
 
         <ng-template #popupTemplate>
             <!--popup/actionsheet content-->
@@ -11263,7 +11669,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </ng-container>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: 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: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: 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: 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: 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.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: 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: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: 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: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -11309,65 +11715,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             "
             popupLabel="Options list"
         ></ng-container>
-        <kendo-searchbar
-            #searchbar
-            [role]="'combobox'"
-            [ariaExpanded]="isOpen"
-            [ariaControls]="ariaControls"
-            [id]="focusableId"
-            [isLoading]="loading"
-            [isSuggestable]="suggest"
-            [isFilterable]="filterable"
-            [activeDescendant]="activeDescendant"
-            [userInput]="text"
-            [suggestedText]="getSuggestion()"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [tabIndex]="tabIndex"
-            [placeholder]="placeholder"
-            (onNavigate)="handleNavigate($event)"
-            (valueChange)="searchBarChange($event)"
-            (onBlur)="handleBlur()"
+
+        <ng-container
+            kendoDropDownSharedEvents
+            [hostElement]="hostElement"
+            [(isFocused)]="isFocused"
+            (handleBlur)="handleBlur()"
             (onFocus)="handleFocus()"
-            (click)="handleClick()"
         >
-        </kendo-searchbar>
+            <span *ngIf="prefixTemplate" class="k-input-prefix k-input-prefix-horizontal">
+                <ng-template [ngTemplateOutlet]="prefixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
+            <kendo-searchbar
+                #searchbar
+                [role]="'combobox'"
+                [ariaExpanded]="isOpen"
+                [ariaControls]="ariaControls"
+                [id]="focusableId"
+                [isLoading]="loading"
+                [isSuggestable]="suggest"
+                [isFilterable]="filterable"
+                [activeDescendant]="activeDescendant"
+                [userInput]="text"
+                [suggestedText]="getSuggestion()"
+                [disabled]="disabled"
+                [readonly]="readonly"
+                [tabIndex]="tabIndex"
+                [placeholder]="placeholder"
+                (onNavigate)="handleNavigate($event)"
+                (valueChange)="searchBarChange($event)"
+                (onBlur)="handleInputBlur()"
+                (onFocus)="handleInputFocus()"
+                (click)="handleClick()"
+            >
+            </kendo-searchbar>
 
-        <span
-            *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && text?.length"
-            class="k-clear-value"
-            [style.visibility]="clearButtonVisiblity"
-            aria-hidden="true"
-            [attr.title]="messageFor('clearTitle')"
-            (click)="clearValue($event)"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
-        >
-            <kendo-icon-wrapper name="x" [svgIcon]="xIcon"> </kendo-icon-wrapper>
-        </span>
+            <span
+                *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && text?.length"
+                class="k-clear-value"
+                [style.visibility]="clearButtonVisiblity"
+                aria-hidden="true"
+                [attr.title]="messageFor('clearTitle')"
+                (click)="clearValue($event)"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
+            >
+                <kendo-icon-wrapper name="x" [svgIcon]="xIcon"> </kendo-icon-wrapper>
+            </span>
 
-        <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
-        <button
-            #select
-            tabindex="-1"
-            aria-hidden="true"
-            unselectable="on"
-            type="button"
-            class="k-input-button k-button k-icon-button"
-            [ngClass]="selectButtonClasses"
-            [attr.aria-label]="messageFor('selectButtonText')"
-            [kendoEventsOutsideAngular]="{
-                mousedown: preventEventDefault
-            }"
-        >
-            <kendo-icon-wrapper
-                [name]="icon || 'caret-alt-down'"
-                innerCssClass="k-button-icon"
-                [svgIcon]="svgIcon || caretAltDownIcon"
+            <span *ngIf="loading" class="k-i-loading k-input-loading-icon k-icon"></span>
+            <kendo-separator *ngIf="suffixTemplate && suffixTemplate.showSeparator"></kendo-separator>
+            <span *ngIf="suffixTemplate" class="k-input-suffix k-input-suffix-horizontal">
+                <ng-template [ngTemplateOutlet]="suffixTemplate?.templateRef">
+                </ng-template>
+            </span>
+            <button
+                #select
+                tabindex="-1"
+                aria-hidden="true"
+                unselectable="on"
+                type="button"
+                class="k-input-button k-button k-icon-button"
+                [ngClass]="selectButtonClasses"
+                [attr.aria-label]="messageFor('selectButtonText')"
+                [kendoEventsOutsideAngular]="{
+                    mousedown: preventEventDefault
+                }"
             >
-            </kendo-icon-wrapper>
-        </button>
+                <kendo-icon-wrapper
+                    [name]="icon || 'caret-alt-down'"
+                    innerCssClass="k-button-icon"
+                    [svgIcon]="svgIcon || caretAltDownIcon"
+                >
+                </kendo-icon-wrapper>
+            </button>
+        </ng-container>
 
         <ng-template #popupTemplate>
             <!--popup/actionsheet content-->
@@ -11527,7 +11952,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]
-                }] }, { type: i0.Injector }]; }, propDecorators: { hostClasses: [{
+                }] }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-dropdowngrid']
             }], isDisabled: [{
@@ -11670,7 +12095,7 @@ class DropDownTreeComponent {
         this.placeholder = "";
         this._listHeight = 200;
         /**
-         * Sets the disabled state of the component.
+         * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_dropdowntree#toc-managing-the-dropdowntree-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -12957,7 +13382,7 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
         </ng-template>
 
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.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: 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: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14$1.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: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i1$1.SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -13832,7 +14257,7 @@ class MultiSelectTreeComponent {
         this.placeholder = '';
         this._listHeight = 200;
         /**
-         * Sets the disabled state of the component.
+         * Sets the disabled state of the component. To learn how to disable the component in reactive forms, refer to the article on [Forms Support](slug:formssupport_multiselecttree#toc-managing-the-multiselecttree-disabled-state-in-reactive-forms).
          */
         this.disabled = false;
         /**
@@ -15319,31 +15744,32 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             cancelButton="Cancel"
         >
         </ng-container>
-        <div class="k-input-values">
-            <kendo-taglist
-                [size]="size"
-                [rounded]="rounded"
-                [fillMode]="fillMode"
-                [id]="tagListId"
-                [tags]="tags"
-                [focused]="focusedTagIndex"
-                [textField]="textField"
-                [valueField]="valueField"
-                [valueDepth]="valueDepth"
-                [disabled]="disabled"
-                [tagPrefix]="tagPrefix"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
-        </div>
-        <span
-            *ngIf="!tags || !tags.length"
-            class="k-input-inner k-readonly"
+        <kendo-taglist
+            class="k-input-values"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [id]="tagListId"
+            [tags]="tags"
+            [focused]="focusedTagIndex"
+            [textField]="textField"
+            [valueField]="valueField"
+            [valueDepth]="valueDepth"
+            [disabled]="disabled"
+            [tagPrefix]="tagPrefix"
+            [template]="tagTemplate"
+            [groupTemplate]="groupTagTemplate"
+            [disabledIndices]="disabledIndices"
+            (removeTag)="handleRemoveTag($event)"
         >
-            <span class="k-input-value-text">{{ placeholder }}</span>
+        </kendo-taglist>
+        <span class="k-input-inner k-readonly">
+            <span 
+                *ngIf="!tags || !tags.length"
+                class="k-input-value-text"
+            >
+                {{ placeholder }}
+            </span>
         </span>
         <span
             *ngIf="!disabled && !loading && !readonly && clearButton && tags?.length"
@@ -15516,7 +15942,7 @@ MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         </ng-template>
 
         <kendo-resize-sensor *ngIf="isOpen || isAdaptiveModeEnabled" (resize)="onResize()"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: 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: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: 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: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
+    `, isInline: true, components: [{ type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i9.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i1$1.TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { type: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14$1.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: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -15575,31 +16001,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             cancelButton="Cancel"
         >
         </ng-container>
-        <div class="k-input-values">
-            <kendo-taglist
-                [size]="size"
-                [rounded]="rounded"
-                [fillMode]="fillMode"
-                [id]="tagListId"
-                [tags]="tags"
-                [focused]="focusedTagIndex"
-                [textField]="textField"
-                [valueField]="valueField"
-                [valueDepth]="valueDepth"
-                [disabled]="disabled"
-                [tagPrefix]="tagPrefix"
-                [template]="tagTemplate"
-                [groupTemplate]="groupTagTemplate"
-                [disabledIndices]="disabledIndices"
-                (removeTag)="handleRemoveTag($event)"
-            >
-            </kendo-taglist>
-        </div>
-        <span
-            *ngIf="!tags || !tags.length"
-            class="k-input-inner k-readonly"
+        <kendo-taglist
+            class="k-input-values"
+            [size]="size"
+            [rounded]="rounded"
+            [fillMode]="fillMode"
+            [id]="tagListId"
+            [tags]="tags"
+            [focused]="focusedTagIndex"
+            [textField]="textField"
+            [valueField]="valueField"
+            [valueDepth]="valueDepth"
+            [disabled]="disabled"
+            [tagPrefix]="tagPrefix"
+            [template]="tagTemplate"
+            [groupTemplate]="groupTagTemplate"
+            [disabledIndices]="disabledIndices"
+            (removeTag)="handleRemoveTag($event)"
         >
-            <span class="k-input-value-text">{{ placeholder }}</span>
+        </kendo-taglist>
+        <span class="k-input-inner k-readonly">
+            <span 
+                *ngIf="!tags || !tags.length"
+                class="k-input-value-text"
+            >
+                {{ placeholder }}
+            </span>
         </span>
         <span
             *ngIf="!disabled && !loading && !readonly && clearButton && tags?.length"
@@ -16570,6 +16997,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['kendoMultiSelectSummaryTag']
             }] } });
 
+/**
+ * @hidden
+ */
+class SharedEventsModule {
+}
+SharedEventsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SharedEventsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule, declarations: [SharedDropDownEventsDirective], exports: [SharedDropDownEventsDirective] });
+SharedEventsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SharedEventsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SharedDropDownEventsDirective],
+                    exports: [SharedDropDownEventsDirective],
+                }]
+        }] });
+
 const AUTOCOMPLETE_DIRECTIVES = [
     AutoCompleteComponent
 ];
@@ -16587,14 +17030,14 @@ const AUTOCOMPLETE_DIRECTIVES = [
 class AutoCompleteModule {
 }
 AutoCompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AutoCompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, declarations: [AutoCompleteComponent], imports: [SharedModule], exports: [AutoCompleteComponent, SharedDirectivesModule] });
-AutoCompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, imports: [[SharedModule], SharedDirectivesModule] });
+AutoCompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, declarations: [AutoCompleteComponent], imports: [SharedModule, AdornmentsModule, SharedEventsModule], exports: [AutoCompleteComponent, SharedDirectivesModule, AdornmentsModule] });
+AutoCompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, imports: [[SharedModule, AdornmentsModule, SharedEventsModule], SharedDirectivesModule, AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AUTOCOMPLETE_DIRECTIVES],
-                    exports: [AUTOCOMPLETE_DIRECTIVES, SharedDirectivesModule],
-                    imports: [SharedModule]
+                    exports: [AUTOCOMPLETE_DIRECTIVES, SharedDirectivesModule, AdornmentsModule],
+                    imports: [SharedModule, AdornmentsModule, SharedEventsModule]
                 }]
         }] });
 
@@ -16626,18 +17069,18 @@ ComboBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         MultiColumnComboBoxComponent,
         ComboBoxColumnComponent,
         ColumnHeaderTemplateDirective,
-        ColumnCellTemplateDirective], imports: [SharedModule], exports: [ComboBoxComponent,
+        ColumnCellTemplateDirective], imports: [SharedModule, AdornmentsModule, SharedEventsModule], exports: [ComboBoxComponent,
         MultiColumnComboBoxComponent,
         ComboBoxColumnComponent,
         ColumnHeaderTemplateDirective,
-        ColumnCellTemplateDirective, SharedDirectivesModule] });
-ComboBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule], SharedDirectivesModule] });
+        ColumnCellTemplateDirective, SharedDirectivesModule, AdornmentsModule] });
+ComboBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule, AdornmentsModule, SharedEventsModule], SharedDirectivesModule, AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMBOBOX_DIRECTIVES],
-                    exports: [COMBOBOX_DIRECTIVES, SharedDirectivesModule],
-                    imports: [SharedModule],
+                    exports: [COMBOBOX_DIRECTIVES, SharedDirectivesModule, AdornmentsModule],
+                    imports: [SharedModule, AdornmentsModule, SharedEventsModule],
                     providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }]
                 }]
         }] });
@@ -16697,16 +17140,16 @@ class MultiSelectModule {
 MultiSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 MultiSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectModule, declarations: [MultiSelectComponent,
         SummaryTagDirective,
-        CustomItemTemplateDirective], imports: [SharedModule], exports: [MultiSelectComponent,
+        CustomItemTemplateDirective], imports: [SharedModule, AdornmentsModule, SharedEventsModule], exports: [MultiSelectComponent,
         SummaryTagDirective,
-        CustomItemTemplateDirective, SharedDirectivesModule] });
-MultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule], SharedDirectivesModule] });
+        CustomItemTemplateDirective, SharedDirectivesModule, AdornmentsModule] });
+MultiSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectModule, providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }], imports: [[SharedModule, AdornmentsModule, SharedEventsModule], SharedDirectivesModule, AdornmentsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [MULTISELECT_DIRECTIVES],
-                    exports: [MULTISELECT_DIRECTIVES, SharedDirectivesModule],
-                    imports: [SharedModule],
+                    exports: [MULTISELECT_DIRECTIVES, SharedDirectivesModule, AdornmentsModule],
+                    imports: [SharedModule, AdornmentsModule, SharedEventsModule],
                     providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }]
                 }]
         }] });