@progress/kendo-angular-dropdowns 16.3.0 → 16.3.1-develop.2

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

@@ -3,7 +3,7 @@
 * 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 { EventEmitter, Component, Input, HostBinding, Output, Directive, Injectable, HostListener, ViewChildren, ViewChild, InjectionToken, forwardRef, isDevMode, ViewContainerRef, Optional, Inject, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i12 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, Keys, setHTMLAttributes, isChanged, closest as closest$1, isControlRequired, hasObservers, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, MultiTabStop, anyChanged, guid as guid$1, ResizeSensorModule, EventsModule, AdornmentsModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
 export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1718884880,
-    version: '16.3.0',
+    publishDate: 1719562066,
+    version: '16.3.1-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -473,16 +473,17 @@ const animationDuration = 300;
  * @hidden
  */
 class SearchBarComponent {
-    constructor(localization, renderer, injector) {
+    constructor(localization, renderer, injector, input) {
         this.localization = localization;
         this.injector = injector;
+        this.input = input;
         this.ariaExpanded = null;
+        this.role = 'combobox';
         this.valueChange = new EventEmitter();
         this.onBlur = new EventEmitter();
         this.onFocus = new EventEmitter();
         this.onClick = new EventEmitter();
         this.onNavigate = new EventEmitter();
-        this.searchBarClass = true;
         this._userInput = "";
         this._previousValue = "";
         this._placeholder = "";
@@ -492,6 +493,45 @@ class SearchBarComponent {
         this.parsedAttributes = {};
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.renderer = renderer;
+        this.renderer.addClass(this.input.nativeElement, 'k-input-inner');
+        this.renderer.setAttribute(this.input.nativeElement, 'aria-haspopup', 'listbox');
+        this.renderer.setAttribute(this.input.nativeElement, 'autocomplete', 'off');
+    }
+    set readonly(readonly) {
+        this._readonly = readonly;
+        if (this._readonly) {
+            this.renderer.setAttribute(this.input.nativeElement, 'readonly', '');
+        }
+        else {
+            this.renderer.removeAttribute(this.input.nativeElement, 'readonly');
+        }
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    set disabled(disabled) {
+        this._disabled = disabled;
+        if (this._disabled) {
+            this.renderer.setAttribute(this.input.nativeElement, 'disabled', '');
+        }
+        else {
+            this.renderer.removeAttribute(this.input.nativeElement, 'disabled');
+        }
+    }
+    get disabled() {
+        return this._disabled;
+    }
+    set isRequired(isRequired) {
+        this._isRequired = isRequired;
+        if (this._isRequired) {
+            this.renderer.setAttribute(this.input.nativeElement, 'required', '');
+        }
+        else {
+            this.renderer.removeAttribute(this.input.nativeElement, 'required');
+        }
+    }
+    get isRequired() {
+        return this._isRequired;
     }
     set isSuggestable(isSuggestable) {
         this._isSuggestable = isSuggestable;
@@ -536,8 +576,8 @@ class SearchBarComponent {
     get inputAttributes() {
         return this._inputAttributes;
     }
-    get value() {
-        return this.input.nativeElement.value;
+    get attrAriaInvalid() {
+        return this.formControl?.invalid;
     }
     set placeholder(text) {
         this._placeholder = text || '';
@@ -546,6 +586,12 @@ class SearchBarComponent {
     get placeholder() {
         return this._placeholder;
     }
+    get dir() {
+        return this.direction;
+    }
+    get value() {
+        return this.input.nativeElement.value;
+    }
     get defaultAttributes() {
         return {
             id: this.id,
@@ -610,6 +656,12 @@ class SearchBarComponent {
             this._previousValue = this.userInput;
         }
     }
+    ngAfterViewInit() {
+        this.subs.add(this.input.nativeElement.addEventListener('input', (event) => this.handleInput(event)));
+        this.subs.add(this.input.nativeElement.addEventListener('focus', (event) => this.handleFocus(event)));
+        this.subs.add(this.input.nativeElement.addEventListener('blur', (event) => this.handleBlur(event)));
+        this.subs.add(this.input.nativeElement.addEventListener('keydown', (event) => this.handleKeydown(event)));
+    }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
@@ -688,87 +740,19 @@ class SearchBarComponent {
         setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement);
     }
 }
-SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchBarComponent, selector: "kendo-searchbar", inputs: { id: "id", tagListId: "tagListId", activeDescendant: "activeDescendant", disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", role: "role", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", isRequired: "isRequired", isSuggestable: "isSuggestable", isFilterable: "isFilterable", userInput: "userInput", suggestedText: "suggestedText", inputAttributes: "inputAttributes", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-searchbar": "this.searchBarClass" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
-        <input #input
-            autocomplete="off"
-            [id]="id"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [placeholder]="placeholder"
-            class="k-input-inner"
-            (input)="handleInput($event)"
-            (keydown)="handleKeydown($event)"
-            [kendoEventsOutsideAngular]="{
-                focus: handleFocus,
-                blur: handleBlur
-            }"
-            [scope]="this"
-            [attr.tabIndex]="tabIndex"
-            [attr.dir]="direction"
-            [attr.role]="role"
-            aria-haspopup="listbox"
-            [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-controls]="ariaControls"
-            [attr.aria-describedby]="tagListId"
-            [attr.aria-activedescendant]="activeDescendant"
-            [attr.aria-busy]="isLoading"
-            [attr.aria-invalid]="formControl?.invalid"
-            [attr.required]="isRequired ? '' : null"
-        />
-   `, isInline: true, dependencies: [{ kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: { tagListId: "tagListId", readonly: "readonly", disabled: "disabled", isRequired: "isRequired", isSuggestable: "isSuggestable", isFilterable: "isFilterable", userInput: "userInput", suggestedText: "suggestedText", inputAttributes: "inputAttributes", id: "id", activeDescendant: "activeDescendant", tabIndex: "tabIndex", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "attr.id": "this.id", "attr.aria-activedescendant": "this.activeDescendant", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.isLoading", "attr.aria-controls": "this.ariaControls", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-invalid": "this.attrAriaInvalid", "attr.placeholder": "this.placeholder", "attr.role": "this.role", "attr.dir": "this.dir" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-searchbar',
-                    template: `
-        <input #input
-            autocomplete="off"
-            [id]="id"
-            [disabled]="disabled"
-            [readonly]="readonly"
-            [placeholder]="placeholder"
-            class="k-input-inner"
-            (input)="handleInput($event)"
-            (keydown)="handleKeydown($event)"
-            [kendoEventsOutsideAngular]="{
-                focus: handleFocus,
-                blur: handleBlur
-            }"
-            [scope]="this"
-            [attr.tabIndex]="tabIndex"
-            [attr.dir]="direction"
-            [attr.role]="role"
-            aria-haspopup="listbox"
-            [attr.aria-expanded]="ariaExpanded"
-            [attr.aria-controls]="ariaControls"
-            [attr.aria-describedby]="tagListId"
-            [attr.aria-activedescendant]="activeDescendant"
-            [attr.aria-busy]="isLoading"
-            [attr.aria-invalid]="formControl?.invalid"
-            [attr.required]="isRequired ? '' : null"
-        />
-   `
+                    selector: 'input[kendoSearchbar]',
+                    template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { id: [{
-                type: Input
-            }], tagListId: [{
-                type: Input
-            }], activeDescendant: [{
-                type: Input
-            }], disabled: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { tagListId: [{
                 type: Input
             }], readonly: [{
                 type: Input
-            }], tabIndex: [{
-                type: Input
-            }], role: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], ariaControls: [{
-                type: Input
-            }], ariaExpanded: [{
+            }], disabled: [{
                 type: Input
             }], isRequired: [{
                 type: Input
@@ -782,6 +766,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], inputAttributes: [{
                 type: Input
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }, {
+                type: Input
+            }], activeDescendant: [{
+                type: HostBinding,
+                args: ['attr.aria-activedescendant']
+            }, {
+                type: Input
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }, {
+                type: Input
+            }], isLoading: [{
+                type: HostBinding,
+                args: ['attr.aria-busy']
+            }, {
+                type: Input
+            }], ariaControls: [{
+                type: HostBinding,
+                args: ['attr.aria-controls']
+            }, {
+                type: Input
+            }], ariaExpanded: [{
+                type: HostBinding,
+                args: ['attr.aria-expanded']
+            }, {
+                type: Input
+            }], attrAriaInvalid: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }], placeholder: [{
+                type: HostBinding,
+                args: ['attr.placeholder']
+            }, {
+                type: Input
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], dir: [{
+                type: HostBinding,
+                args: ['attr.dir']
             }], valueChange: [{
                 type: Output
             }], onBlur: [{
@@ -792,14 +820,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], onNavigate: [{
                 type: Output
-            }], input: [{
-                type: ViewChild,
-                args: ['input', { static: true }]
-            }], searchBarClass: [{
-                type: HostBinding,
-                args: ['class.k-searchbar']
-            }], placeholder: [{
-                type: Input
             }] } });
 
 /**
@@ -4098,8 +4118,8 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 </ng-template>
             </span>
             <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
-            <kendo-searchbar #searchbar
-                [role]="'combobox'"
+            <input
+                kendoSearchbar
                 [ariaExpanded]="isOpen"
                 [isSuggestable]="suggest"
                 [isFilterable]="filterable"
@@ -4120,7 +4140,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 (onBlur)="handleInputBlur()"
                 (onFocus)="handleInputFocus()"
                 (click)="handleClick()"
-            ></kendo-searchbar>
+            />
             <span
                 *ngIf="!loading && !readonly && (clearButton && text?.length)"
                 class="k-clear-value"
@@ -4210,7 +4230,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "component", type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -4261,8 +4281,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </ng-template>
             </span>
             <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
-            <kendo-searchbar #searchbar
-                [role]="'combobox'"
+            <input
+                kendoSearchbar
                 [ariaExpanded]="isOpen"
                 [isSuggestable]="suggest"
                 [isFilterable]="filterable"
@@ -4283,7 +4303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 (onBlur)="handleInputBlur()"
                 (onFocus)="handleInputFocus()"
                 (click)="handleClick()"
-            ></kendo-searchbar>
+            />
             <span
                 *ngIf="!loading && !readonly && (clearButton && text?.length)"
                 class="k-clear-value"
@@ -6098,8 +6118,8 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                 </ng-template>
             </span>
             <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
-            <kendo-searchbar #searchbar
-                [role]="'combobox'"
+            <input 
+                kendoSearchbar
                 [ariaExpanded]="isOpen"
                 [ariaControls]="ariaControls"
                 [id]="focusableId"
@@ -6120,7 +6140,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                 (onBlur)="handleInputBlur()"
                 (onFocus)="handleInputFocus()"
                 (click)="handleClick()"
-            ></kendo-searchbar>
+            />
             <span
                 *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
                 class="k-clear-value"
@@ -6230,7 +6250,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "component", type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -6285,8 +6305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </ng-template>
             </span>
             <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
-            <kendo-searchbar #searchbar
-                [role]="'combobox'"
+            <input 
+                kendoSearchbar
                 [ariaExpanded]="isOpen"
                 [ariaControls]="ariaControls"
                 [id]="focusableId"
@@ -6307,7 +6327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 (onBlur)="handleInputBlur()"
                 (onFocus)="handleInputFocus()"
                 (click)="handleClick()"
-            ></kendo-searchbar>
+            />
             <span
                 *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
                 class="k-clear-value"
@@ -10713,12 +10733,11 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                     (removeTag)="handleRemoveTag($event)"
                 >
                 </kendo-taglist>
-                <kendo-searchbar
-                    #searchbar
-                    [ariaExpanded]="isOpen"
+                <input
+                    kendoSearchbar
                     [ariaControls]="ariaControls"
+                    [ariaExpanded]="isOpen"
                     [id]="focusableId"
-                    [role]="'combobox'"
                     [tagListId]="tagListId"
                     [isLoading]="loading"
                     [isFilterable]="filterable"
@@ -10735,8 +10754,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                     (onBlur)="handleInputBlur()"
                     (onFocus)="handleInputFocus()"
                     (click)="handleClick()"
-                >
-                </kendo-searchbar>
+                />
             </div>
 
             <span
@@ -10861,7 +10879,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "component", type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -10934,12 +10952,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     (removeTag)="handleRemoveTag($event)"
                 >
                 </kendo-taglist>
-                <kendo-searchbar
-                    #searchbar
-                    [ariaExpanded]="isOpen"
+                <input
+                    kendoSearchbar
                     [ariaControls]="ariaControls"
+                    [ariaExpanded]="isOpen"
                     [id]="focusableId"
-                    [role]="'combobox'"
                     [tagListId]="tagListId"
                     [isLoading]="loading"
                     [isFilterable]="filterable"
@@ -10956,8 +10973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     (onBlur)="handleInputBlur()"
                     (onFocus)="handleInputFocus()"
                     (click)="handleClick()"
-                >
-                </kendo-searchbar>
+                />
             </div>
 
             <span
@@ -11579,11 +11595,10 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 </ng-template>
             </span>
             <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
-            <kendo-searchbar
-                #searchbar
-                [role]="'combobox'"
-                [ariaExpanded]="isOpen"
+            <input 
+                kendoSearchbar
                 [ariaControls]="ariaControls"
+                [ariaExpanded]="isOpen"
                 [id]="focusableId"
                 [isLoading]="loading"
                 [isSuggestable]="suggest"
@@ -11602,9 +11617,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 (onBlur)="handleInputBlur()"
                 (onFocus)="handleInputFocus()"
                 (click)="handleClick()"
-            >
-            </kendo-searchbar>
-
+            />
             <span
                 *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && text?.length"
                 class="k-clear-value"
@@ -11801,7 +11814,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
                 </ng-container>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "component", type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -11864,11 +11877,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </ng-template>
             </span>
             <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
-            <kendo-searchbar
-                #searchbar
-                [role]="'combobox'"
-                [ariaExpanded]="isOpen"
+            <input 
+                kendoSearchbar
                 [ariaControls]="ariaControls"
+                [ariaExpanded]="isOpen"
                 [id]="focusableId"
                 [isLoading]="loading"
                 [isSuggestable]="suggest"
@@ -11887,9 +11899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 (onBlur)="handleInputBlur()"
                 (onFocus)="handleInputFocus()"
                 (click)="handleClick()"
-            >
-            </kendo-searchbar>
-
+            />
             <span
                 *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large')  && text?.length"
                 class="k-clear-value"

package/package.json

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

package/schematics/ngAdd/index.js

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