@progress/kendo-angular-dropdowns 15.4.0 → 15.5.0-develop.10

package/autocomplete/autocomplete.component.d.ts

@@ -98,6 +98,10 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     get appendTo(): ViewContainerRef;
     get clearButtonVisiblity(): string;
     get ariaControls(): string;
+    /**
+     * @hidden
+     */
+    get isControlRequired(): boolean;
     dataItem: any;
     /**
      * Toggles the visibility of the popup or actionSheet.
@@ -285,6 +289,12 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
      */
     set fillMode(fillMode: DropDownFillMode);
     get fillMode(): DropDownFillMode;
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes: {
+        [key: string]: string;
+    };
     /**
      * Fires each time the value is changed—
      * when the component is blurred or the value is cleared through the **Clear** button
@@ -507,5 +517,5 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     private closeActionSheet;
     private openActionSheet;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutoCompleteComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutoCompleteComponent, "kendo-autocomplete", ["kendoAutoComplete"], { "highlightFirst": "highlightFirst"; "showStickyHeader": "showStickyHeader"; "focusableId": "focusableId"; "data": "data"; "value": "value"; "valueField": "valueField"; "placeholder": "placeholder"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "loading": "loading"; "clearButton": "clearButton"; "suggest": "suggest"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "filterable": "filterable"; "virtual": "virtual"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate", "suffixTemplate", "prefixTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutoCompleteComponent, "kendo-autocomplete", ["kendoAutoComplete"], { "highlightFirst": "highlightFirst"; "showStickyHeader": "showStickyHeader"; "focusableId": "focusableId"; "data": "data"; "value": "value"; "valueField": "valueField"; "placeholder": "placeholder"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "loading": "loading"; "clearButton": "clearButton"; "suggest": "suggest"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "filterable": "filterable"; "virtual": "virtual"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "inputAttributes": "inputAttributes"; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate", "suffixTemplate", "prefixTemplate"], never>;
 }

package/comboboxes/combobox.component.d.ts

@@ -78,6 +78,12 @@ export declare class ComboBoxComponent implements ControlValueAccessor, AfterVie
      * @hidden
      */
     svgIcon: SVGIcon;
+    /**
+     * Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.
+     */
+    inputAttributes: {
+        [key: string]: string;
+    };
     /**
      * @hidden
      */
@@ -108,6 +114,10 @@ export declare class ComboBoxComponent implements ControlValueAccessor, AfterVie
      * @hidden
      */
     get ariaControls(): string;
+    /**
+     * @hidden
+     */
+    get isControlRequired(): boolean;
     /**
      * @hidden
      */
@@ -656,5 +666,5 @@ export declare class ComboBoxComponent implements ControlValueAccessor, AfterVie
     private closeActionSheet;
     private openActionSheet;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComboBoxComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComboBoxComponent, "kendo-combobox", ["kendoComboBox"], { "icon": "icon"; "svgIcon": "svgIcon"; "showStickyHeader": "showStickyHeader"; "focusableId": "focusableId"; "allowCustom": "allowCustom"; "data": "data"; "value": "value"; "textField": "textField"; "valueField": "valueField"; "valuePrimitive": "valuePrimitive"; "valueNormalizer": "valueNormalizer"; "placeholder": "placeholder"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "loading": "loading"; "suggest": "suggest"; "clearButton": "clearButton"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "filterable": "filterable"; "virtual": "virtual"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate", "suffixTemplate", "prefixTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComboBoxComponent, "kendo-combobox", ["kendoComboBox"], { "icon": "icon"; "svgIcon": "svgIcon"; "inputAttributes": "inputAttributes"; "showStickyHeader": "showStickyHeader"; "focusableId": "focusableId"; "allowCustom": "allowCustom"; "data": "data"; "value": "value"; "textField": "textField"; "valueField": "valueField"; "valuePrimitive": "valuePrimitive"; "valueNormalizer": "valueNormalizer"; "placeholder": "placeholder"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "loading": "loading"; "suggest": "suggest"; "clearButton": "clearButton"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "filterable": "filterable"; "virtual": "virtual"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; "inputFocus": "inputFocus"; "inputBlur": "inputBlur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate", "suffixTemplate", "prefixTemplate"], never>;
 }

package/common/searchbar.component.d.ts

@@ -24,6 +24,7 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     isLoading: boolean;
     ariaControls: string;
     ariaExpanded: boolean | null;
+    isRequired: boolean;
     set isSuggestable(isSuggestable: boolean);
     get isSuggestable(): boolean;
     set isFilterable(isFilterable: boolean);
@@ -35,6 +36,15 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
      */
     get formControl(): FormControl;
     suggestedText: string;
+    /**
+     * @hidden
+     */
+    set inputAttributes(attributes: {
+        [key: string]: string;
+    });
+    get inputAttributes(): {
+        [key: string]: string;
+    };
     valueChange: EventEmitter<any>;
     onBlur: EventEmitter<any>;
     onFocus: EventEmitter<any>;
@@ -52,6 +62,10 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     private _isFilterable;
     private renderer;
     private subs;
+    private _inputAttributes;
+    private parsedAttributes;
+    private get defaultAttributes();
+    private get mutableAttributes();
     constructor(localization: LocalizationService, renderer: Renderer2, injector: Injector);
     ngOnInit(): void;
     ngOnChanges(changes: any): void;
@@ -66,6 +80,7 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
     focus(): void;
     blur(): void;
     setInputSize(): void;
+    private setInputAttributes;
     static ɵfac: i0.ɵɵFactoryDeclaration<SearchBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "kendo-searchbar", never, { "id": "id"; "tagListId": "tagListId"; "activeDescendant": "activeDescendant"; "disabled": "disabled"; "readonly": "readonly"; "tabIndex": "tabIndex"; "role": "role"; "isLoading": "isLoading"; "ariaControls": "ariaControls"; "ariaExpanded": "ariaExpanded"; "isSuggestable": "isSuggestable"; "isFilterable": "isFilterable"; "userInput": "userInput"; "suggestedText": "suggestedText"; "placeholder": "placeholder"; }, { "valueChange": "valueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onNavigate": "onNavigate"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "kendo-searchbar", never, { "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"; }, { "valueChange": "valueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onNavigate": "onNavigate"; }, never, never>;
 }

package/esm2020/autocomplete/autocomplete.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Renderer2, forwardRef, ElementRef, Input, Output, EventEmitter, ContentChild, ViewChild, ViewContainerRef, TemplateRef, HostBinding, isDevMode, ChangeDetectorRef, NgZone, Optional, Inject, Injector } from '@angular/core';
-import { isDocumentAvailable, KendoInput, hasObservers, SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, KendoInput, hasObservers, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired } from '@progress/kendo-angular-common';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -289,6 +289,12 @@ export class AutoCompleteComponent {
     get ariaControls() {
         return this.isOpen ? this.listBoxId : undefined;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.formControl);
+    }
     /**
      * Toggles the visibility of the popup or actionSheet.
      * If you use the `toggle` method to open or close the popup or actionSheet, the `open` and `close` events will not be fired.
@@ -334,8 +340,7 @@ export class AutoCompleteComponent {
         if (!this.isOpen || !isPresent(this.selectionService.focused) || this.selectionService.focused === -1) {
             return null;
         }
-        const dataItem = this.dataService.itemAt(this.selectionService.focused);
-        return this.optionPrefix + "-" + getter(dataItem, this.valueField);
+        return this.optionPrefix + "-" + this.selectionService.focused;
     }
     /**
      * Sets the data of the AutoComplete.
@@ -1126,7 +1131,7 @@ export class AutoCompleteComponent {
     }
 }
 AutoCompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: i2.DataService }, { token: i3.PopupService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "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", inputAttributes: "inputAttributes" }, 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-readonly": "this.readonly", "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,
@@ -1184,7 +1189,9 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [disabled]="disabled"
                 [readonly]="readonly || this.isAdaptive"
                 [tabIndex]="tabIndex"
+                [isRequired]="isControlRequired"
                 [placeholder]="placeholder"
+                [inputAttributes]="inputAttributes"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="searchBarChange($event)"
                 (onBlur)="handleInputBlur()"
@@ -1280,7 +1287,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: i8.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: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.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: i15.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: i8.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"] }, { 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: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.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: i15.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -1345,7 +1352,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [disabled]="disabled"
                 [readonly]="readonly || this.isAdaptive"
                 [tabIndex]="tabIndex"
+                [isRequired]="isControlRequired"
                 [placeholder]="placeholder"
+                [inputAttributes]="inputAttributes"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="searchBarChange($event)"
                 (onBlur)="handleInputBlur()"
@@ -1505,6 +1514,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], fillMode: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], filterChange: [{

package/esm2020/comboboxes/combobox.component.mjs

@@ -18,7 +18,7 @@ import { NavigationService } from '../common/navigation/navigation.service';
 import { DisabledItemsService } from '../common/disabled-items/disabled-items.service';
 import { merge, of, Subject, Subscription } from 'rxjs';
 import { catchError, filter, map, partition, tap, throttleTime } from 'rxjs/operators';
-import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
+import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired } from '@progress/kendo-angular-common';
 import { isPresent, guid, getter, isEmptyString, isUntouched, inDropDown, getSizeClass, getRoundedClass, getFillModeClass, isTruthy, windowSize, setListBoxAriaLabelLebBy, setActionSheetTitle, updateActionSheetAdaptiveAppearance, animationDuration } from '../common/util';
 import { NavigationAction } from '../common/navigation/navigation-action';
 import { Keys } from '@progress/kendo-angular-common';
@@ -323,6 +323,12 @@ export class ComboBoxComponent {
     get ariaControls() {
         return this.isOpen ? this.listBoxId : undefined;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.formControl);
+    }
     /**
      * @hidden
      */
@@ -341,8 +347,7 @@ export class ComboBoxComponent {
         if (!this.isOpen || !isPresent(this.selectionService.focused) || this.selectionService.focused === -1) {
             return null;
         }
-        const dataItem = this.dataService.itemAt(this.selectionService.focused);
-        return this.optionPrefix + "-" + (dataItem ? getter(dataItem, this.valueField) : "");
+        return this.optionPrefix + "-" + this.selectionService.focused;
     }
     get appendTo() {
         const { appendTo } = this.popupSettings;
@@ -1525,7 +1530,7 @@ export class ComboBoxComponent {
     }
 }
 ComboBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.SelectionService }, { token: i4.NavigationService }, { token: i5.DisabledItemsService }, { token: i6.DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }, { 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-readonly": "this.readonly", "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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", inputAttributes: "inputAttributes", 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-readonly": "this.readonly", "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,
@@ -1584,7 +1589,9 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [disabled]="disabled"
                 [readonly]="readonly || isAdaptive"
                 [tabIndex]="tabIndex"
+                [isRequired]="isControlRequired"
                 [placeholder]="placeholder"
+                [inputAttributes]="inputAttributes"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="searchBarChange($event)"
                 (onBlur)="handleInputBlur()"
@@ -1699,7 +1706,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: i8.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: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.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: i15.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: i8.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"] }, { 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: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.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: i15.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1765,7 +1772,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [disabled]="disabled"
                 [readonly]="readonly || isAdaptive"
                 [tabIndex]="tabIndex"
+                [isRequired]="isControlRequired"
                 [placeholder]="placeholder"
+                [inputAttributes]="inputAttributes"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="searchBarChange($event)"
                 (onBlur)="handleInputBlur()"
@@ -1891,6 +1900,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], svgIcon: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], responsiveRendererComponent: [{
                 type: ViewChild,
                 args: [ResponsiveRendererComponent]

package/esm2020/comboboxes/multicolumncombobox.component.mjs

@@ -232,7 +232,9 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [tabIndex]="tabIndex"
+                [isRequired]="isControlRequired"
                 [placeholder]="placeholder"
+                [inputAttributes]="inputAttributes"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="searchBarChange($event)"
                 (onBlur)="handleInputBlur()"
@@ -436,7 +438,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </ng-container>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: i8.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: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.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: i15.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: i8.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"] }, { 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: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.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: i15.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: [{
@@ -510,7 +512,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [disabled]="disabled"
                 [readonly]="readonly"
                 [tabIndex]="tabIndex"
+                [isRequired]="isControlRequired"
                 [placeholder]="placeholder"
+                [inputAttributes]="inputAttributes"
                 (onNavigate)="handleNavigate($event)"
                 (valueChange)="searchBarChange($event)"
                 (onBlur)="handleInputBlur()"

package/esm2020/common/action-sheet.component.mjs

@@ -121,7 +121,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: i5.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }], directives: [{ type: i2.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { type: i6.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", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { type: i5.IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }], directives: [{ type: i2.ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ResponsiveRendererComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/common/searchbar.component.mjs

@@ -3,8 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Renderer2, Input, Output, EventEmitter, ViewChild, ElementRef, HostBinding, Injector } from '@angular/core';
-import { isDocumentAvailable, isSafari } from '@progress/kendo-angular-common';
-import { Keys } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, isObjectPresent, isSafari, removeHTMLAttributes, setHTMLAttributes, Keys, parseAttributes } from '@progress/kendo-angular-common';
 import { combineStr, isJapanese } from './util';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Subscription } from 'rxjs';
@@ -32,6 +31,7 @@ export class SearchBarComponent {
         this._isSuggestable = false;
         this._isFilterable = false;
         this.subs = new Subscription();
+        this.parsedAttributes = {};
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.renderer = renderer;
     }
@@ -66,6 +66,22 @@ export class SearchBarComponent {
         const ngControl = this.injector.get(NgControl, null);
         return ngControl?.control || null;
     }
+    /**
+     * @hidden
+     */
+    set inputAttributes(attributes) {
+        if (isObjectPresent(this.parsedAttributes)) {
+            removeHTMLAttributes(this.parsedAttributes, this.renderer, this.input.nativeElement);
+        }
+        this._inputAttributes = attributes;
+        this.parsedAttributes = this.inputAttributes ?
+            parseAttributes(this.inputAttributes, this.defaultAttributes) :
+            this.inputAttributes;
+        this.setInputAttributes();
+    }
+    get inputAttributes() {
+        return this._inputAttributes;
+    }
     get value() {
         return this.input.nativeElement.value;
     }
@@ -76,6 +92,32 @@ export class SearchBarComponent {
     get placeholder() {
         return this._placeholder;
     }
+    get defaultAttributes() {
+        return {
+            id: this.id,
+            disabled: this.disabled ? '' : null,
+            readonly: this.readonly ? '' : null,
+            placeholder: this.placeholder,
+            tabIndex: this.tabIndex,
+            tabindex: this.tabIndex,
+            dir: this.direction,
+            required: this.isRequired ? '' : null,
+            'aria-haspopup': 'listbox',
+            'aria-expanded': this.ariaExpanded,
+            'aria-controls': this.ariaControls,
+            'aria-activedescendant': this.activeDescendant,
+            'aria-busy': this.isLoading,
+            'aria-invalid': this.formControl?.invalid
+        };
+    }
+    get mutableAttributes() {
+        return {
+            autocomplete: 'off',
+            role: this.role,
+            'aria-describedby': this.tagListId
+        };
+    }
+    ;
     ngOnInit() {
         this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr'));
@@ -188,9 +230,13 @@ export class SearchBarComponent {
         const size = Math.max(placeholderLength, textLength, 1);
         this.renderer.setAttribute(input, 'size', size.toString());
     }
+    setInputAttributes() {
+        const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
+        setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement);
+    }
 }
 SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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", isSuggestable: "isSuggestable", isFilterable: "isFilterable", userInput: "userInput", suggestedText: "suggestedText", 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: `
+SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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"
@@ -215,6 +261,7 @@ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             [attr.aria-activedescendant]="activeDescendant"
             [attr.aria-busy]="isLoading"
             [attr.aria-invalid]="formControl?.invalid"
+            [attr.required]="isRequired ? '' : null"
         />
    `, isInline: true, directives: [{ type: i2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchBarComponent, decorators: [{
@@ -246,6 +293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [attr.aria-activedescendant]="activeDescendant"
             [attr.aria-busy]="isLoading"
             [attr.aria-invalid]="formControl?.invalid"
+            [attr.required]="isRequired ? '' : null"
         />
    `
                 }]
@@ -269,6 +317,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], ariaExpanded: [{
                 type: Input
+            }], isRequired: [{
+                type: Input
             }], isSuggestable: [{
                 type: Input
             }], isFilterable: [{
@@ -277,6 +327,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], suggestedText: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], onBlur: [{

package/esm2020/dropdownlist/dropdownlist.component.mjs

@@ -283,7 +283,7 @@ export class DropDownListComponent {
         if (!isPresent(this.dataItem) || !this.isOpen) {
             return;
         }
-        return this.optionPrefix + "-" + getter(this.dataItem, this.valueField);
+        return this.optionPrefix + "-" + this.selectionService.focused;
     }
     get appendTo() {
         const { appendTo } = this.popupSettings;

package/esm2020/multiselect/multiselect.component.mjs

@@ -7,7 +7,7 @@ import { SearchBarComponent } from '../common/searchbar.component';
 import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject, Injector } from '@angular/core';
 import { Subscription, Subject, of, merge } from 'rxjs';
 import { catchError, filter, map, tap } from 'rxjs/operators';
-import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective } from '@progress/kendo-angular-common';
+import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired } from '@progress/kendo-angular-common';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -334,6 +334,12 @@ export class MultiSelectComponent {
     get ariaControls() {
         return this.isOpen ? this.listBoxId : undefined;
     }
+    /**
+     * @hidden
+     */
+    get isControlRequired() {
+        return isControlRequired(this.formControl);
+    }
     /**
      * @hidden
      */
@@ -1735,7 +1741,7 @@ export class MultiSelectComponent {
     }
 }
 MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: i3.DataService }, { token: i4.SelectionService }, { token: i5.NavigationService }, { token: i6.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }, { 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-readonly": "this.readonly", "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.ɵ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", inputAttributes: "inputAttributes" }, 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-readonly": "this.readonly", "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,
@@ -1815,7 +1821,9 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                     [disabled]="disabled"
                     [readonly]="readonly || this.isAdaptive"
                     [tabIndex]="tabIndex"
+                    [isRequired]="isControlRequired"
                     [placeholder]="placeholder"
+                    [inputAttributes]="inputAttributes"
                     (onNavigate)="handleNavigate($event)"
                     (valueChange)="handleFilter($event)"
                     (onBlur)="handleInputBlur()"
@@ -1947,7 +1955,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: i8.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i9.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: i10.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: i11.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i12.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: i13.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i14.SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i16.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i17.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { type: i8.TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { type: i9.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"] }, { type: i10.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: i11.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i12.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: i13.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i14.SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i16.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i17.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: [{
@@ -2034,7 +2042,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [disabled]="disabled"
                     [readonly]="readonly || this.isAdaptive"
                     [tabIndex]="tabIndex"
+                    [isRequired]="isControlRequired"
                     [placeholder]="placeholder"
+                    [inputAttributes]="inputAttributes"
                     (onNavigate)="handleNavigate($event)"
                     (valueChange)="handleFilter($event)"
                     (onBlur)="handleInputBlur()"
@@ -2240,6 +2250,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], valueNormalizer: [{
                 type: Input
+            }], inputAttributes: [{
+                type: Input
             }], filterChange: [{
                 type: Output
             }], valueChange: [{

package/esm2020/package-metadata.mjs

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