@progress/kendo-angular-dropdowns 13.4.0-develop.2 → 13.4.0-develop.4

package/autocomplete/autocomplete.component.d.ts

@@ -122,6 +122,11 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
      * By default, `highlightFirst` is set to `true`.
      */
     highlightFirst: boolean;
+    /**
+     * Shows or hides the current group sticky header when using grouped data.
+     * By default the sticky header is displayed.
+     */
+    showStickyHeader: boolean;
     /**
      * @hidden
      */
@@ -470,5 +475,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; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutoCompleteComponent, "kendo-autocomplete", ["kendoAutoComplete"], { "highlightFirst": "highlightFirst"; "focusableId": "focusableId"; "data": "data"; "value": "value"; "valueField": "valueField"; "placeholder": "placeholder"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "loading": "loading"; "clearButton": "clearButton"; "suggest": "suggest"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "filterable": "filterable"; "virtual": "virtual"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutoCompleteComponent, "kendo-autocomplete", ["kendoAutoComplete"], { "highlightFirst": "highlightFirst"; "showStickyHeader": "showStickyHeader"; "focusableId": "focusableId"; "data": "data"; "value": "value"; "valueField": "valueField"; "placeholder": "placeholder"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "loading": "loading"; "clearButton": "clearButton"; "suggest": "suggest"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "filterable": "filterable"; "virtual": "virtual"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate"], never>;
 }

package/comboboxes/combobox.component.d.ts

@@ -105,6 +105,11 @@ export declare class ComboBoxComponent implements ControlValueAccessor, AfterVie
     get appendTo(): ViewContainerRef;
     dataItem: any;
     selected: any[];
+    /**
+     * Shows or hides the current group sticky header when using grouped data.
+     * By default the sticky header is displayed.
+     */
+    showStickyHeader: boolean;
     /**
      * @hidden
      */
@@ -618,5 +623,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; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComboBoxComponent, "kendo-combobox", ["kendoComboBox"], { "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"; "iconClass": "iconClass"; "loading": "loading"; "suggest": "suggest"; "clearButton": "clearButton"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "filterable": "filterable"; "virtual": "virtual"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComboBoxComponent, "kendo-combobox", ["kendoComboBox"], { "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"; "iconClass": "iconClass"; "loading": "loading"; "suggest": "suggest"; "clearButton": "clearButton"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "filterable": "filterable"; "virtual": "virtual"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; }, { "valueChange": "valueChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["template", "headerTemplate", "footerTemplate", "noDataTemplate", "groupTemplate", "fixedGroupTemplate"], never>;
 }

package/common/list.component.d.ts

@@ -48,6 +48,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     ariaLive: string;
     isMultiselect: boolean;
     isActionSheetExpanded: boolean;
+    showStickyHeader: boolean;
     set data(data: any[]);
     get data(): any[];
     set size(size: DropDownSize);
@@ -89,6 +90,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
         [propertyName: string]: SimpleChange;
     }): void;
     ngAfterViewInit(): void;
+    private setGroupAttributes;
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     onCheckedChange(e: Event, index: number): void;
@@ -127,5 +129,5 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
     private firstGroupHeaderInTargetedPage;
     private setComponentClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": "selected"; "focused": "focused"; "textField": "textField"; "valueField": "valueField"; "height": "height"; "template": "template"; "groupTemplate": "groupTemplate"; "fixedGroupTemplate": "fixedGroupTemplate"; "show": "show"; "id": "id"; "optionPrefix": "optionPrefix"; "multipleSelection": "multipleSelection"; "virtual": "virtual"; "type": "type"; "checkboxes": "checkboxes"; "ariaLive": "ariaLive"; "isMultiselect": "isMultiselect"; "isActionSheetExpanded": "isActionSheetExpanded"; "data": "data"; "size": "size"; "rounded": "rounded"; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": "selected"; "focused": "focused"; "textField": "textField"; "valueField": "valueField"; "height": "height"; "template": "template"; "groupTemplate": "groupTemplate"; "fixedGroupTemplate": "fixedGroupTemplate"; "show": "show"; "id": "id"; "optionPrefix": "optionPrefix"; "multipleSelection": "multipleSelection"; "virtual": "virtual"; "type": "type"; "checkboxes": "checkboxes"; "ariaLive": "ariaLive"; "isMultiselect": "isMultiselect"; "isActionSheetExpanded": "isActionSheetExpanded"; "showStickyHeader": "showStickyHeader"; "data": "data"; "size": "size"; "rounded": "rounded"; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; }, never, never>;
 }

package/dropdownlist/dropdownlist.component.d.ts

@@ -112,6 +112,11 @@ export declare class DropDownListComponent implements ControlValueAccessor, Afte
      * @hidden
      */
     get ariaLive(): string;
+    /**
+     * Shows or hides the current group sticky header when using grouped data.
+     * By default the sticky header is displayed.
+     */
+    showStickyHeader: boolean;
     /**
      * @hidden
      */
@@ -594,5 +599,5 @@ export declare class DropDownListComponent implements ControlValueAccessor, Afte
     private closeActionSheet;
     private openActionSheet;
     static ɵfac: i0.ɵɵFactoryDeclaration<DropDownListComponent, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropDownListComponent, "kendo-dropdownlist", ["kendoDropDownList"], { "iconClass": "iconClass"; "loading": "loading"; "data": "data"; "value": "value"; "textField": "textField"; "valueField": "valueField"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "defaultItem": "defaultItem"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "filterable": "filterable"; "virtual": "virtual"; "ignoreCase": "ignoreCase"; "delay": "delay"; "valuePrimitive": "valuePrimitive"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "focusableId": "id"; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "selectionChange": "selectionChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate", "groupTemplate", "fixedGroupTemplate", "valueTemplate", "headerTemplate", "footerTemplate", "noDataTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DropDownListComponent, "kendo-dropdownlist", ["kendoDropDownList"], { "showStickyHeader": "showStickyHeader"; "iconClass": "iconClass"; "loading": "loading"; "data": "data"; "value": "value"; "textField": "textField"; "valueField": "valueField"; "adaptiveMode": "adaptiveMode"; "title": "title"; "subtitle": "subtitle"; "popupSettings": "popupSettings"; "listHeight": "listHeight"; "defaultItem": "defaultItem"; "disabled": "disabled"; "itemDisabled": "itemDisabled"; "readonly": "readonly"; "filterable": "filterable"; "virtual": "virtual"; "ignoreCase": "ignoreCase"; "delay": "delay"; "valuePrimitive": "valuePrimitive"; "tabindex": "tabindex"; "tabIndex": "tabIndex"; "size": "size"; "rounded": "rounded"; "fillMode": "fillMode"; "focusableId": "id"; }, { "valueChange": "valueChange"; "filterChange": "filterChange"; "selectionChange": "selectionChange"; "open": "open"; "opened": "opened"; "close": "close"; "closed": "closed"; "onFocus": "focus"; "onBlur": "blur"; }, ["itemTemplate", "groupTemplate", "fixedGroupTemplate", "valueTemplate", "headerTemplate", "footerTemplate", "noDataTemplate"], never>;
 }

package/esm2020/autocomplete/autocomplete.component.mjs

@@ -103,6 +103,11 @@ export class AutoCompleteComponent {
          * By default, `highlightFirst` is set to `true`.
          */
         this.highlightFirst = true;
+        /**
+         * Shows or hides the current group sticky header when using grouped data.
+         * By default the sticky header is displayed.
+         */
+        this.showStickyHeader = true;
         /**
          * @hidden
          */
@@ -240,7 +245,7 @@ export class AutoCompleteComponent {
         return isPresent(popupHeight) ? `${popupHeight}px` : 'auto';
     }
     get listContainerClasses() {
-        const containerClasses = ['k-list-container', 'k-reset'];
+        const containerClasses = ['k-list-container', 'k-autocomplete-popup'];
         if (this.popupSettings.popupClass) {
             containerClasses.push(this.popupSettings.popupClass);
         }
@@ -1061,7 +1066,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 }], target: i0.ɵɵFactoryTarget.Component });
-AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AutoCompleteComponent, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-autocomplete": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         AUTOCOMPLETE_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1173,6 +1178,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [height]="listHeight"
                 [show]="isOpen"
                 [virtual]="virtual"
+                [showStickyHeader]="showStickyHeader"
                 (pageChange)="pageChange($event)"
             >
             </kendo-list>
@@ -1194,7 +1200,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AutoCompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -1313,6 +1319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [height]="listHeight"
                 [show]="isOpen"
                 [virtual]="virtual"
+                [showStickyHeader]="showStickyHeader"
                 (pageChange)="pageChange($event)"
             >
             </kendo-list>
@@ -1346,6 +1353,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: [ResponsiveRendererComponent]
             }], highlightFirst: [{
                 type: Input
+            }], showStickyHeader: [{
+                type: Input
             }], focusableId: [{
                 type: Input
             }], data: [{

package/esm2020/comboboxes/combobox.component.mjs

@@ -103,6 +103,11 @@ export class ComboBoxComponent {
          */
         this.caretAltDownIcon = caretAltDownIcon;
         this.selected = [];
+        /**
+         * Shows or hides the current group sticky header when using grouped data.
+         * By default the sticky header is displayed.
+         */
+        this.showStickyHeader = true;
         /**
          * @hidden
          */
@@ -1258,7 +1263,7 @@ export class ComboBoxComponent {
         this.togglePopup(!this.isOpen);
     }
     get listContainerClasses() {
-        return ['k-list-container', 'k-reset'].concat(this.popupSettings.popupClass || []);
+        return ['k-list-container', 'k-combobox-popup'].concat(this.popupSettings.popupClass || []);
     }
     /**
      * @hidden
@@ -1453,7 +1458,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 }], target: i0.ɵɵFactoryTarget.Component });
-ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { 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", iconClass: "iconClass", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
+ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ComboBoxComponent, selector: "kendo-combobox", inputs: { 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", iconClass: "iconClass", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { properties: { "class.k-combobox": "this.widgetClasses", "class.k-input": "this.widgetClasses", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
         COMBOBOX_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1586,6 +1591,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 [height]="listHeight"
                 [show]="isOpen"
                 [virtual]="virtual"
+                [showStickyHeader]="showStickyHeader"
                 (pageChange)="pageChange($event)"
             >
             </kendo-list>
@@ -1607,7 +1613,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+  `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1747,6 +1753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [height]="listHeight"
                 [show]="isOpen"
                 [virtual]="virtual"
+                [showStickyHeader]="showStickyHeader"
                 (pageChange)="pageChange($event)"
             >
             </kendo-list>
@@ -1778,6 +1785,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }] }]; }, propDecorators: { responsiveRendererComponent: [{
                 type: ViewChild,
                 args: [ResponsiveRendererComponent]
+            }], showStickyHeader: [{
+                type: Input
             }], focusableId: [{
                 type: Input
             }], allowCustom: [{

package/esm2020/comboboxes/multicolumncombobox.component.mjs

@@ -414,7 +414,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 </ng-container>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    `, isInline: true, components: [{ type: i7.SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isSuggestable", "isFilterable", "userInput", "suggestedText", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i9.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i10.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i11.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i12.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
             type: Component,
             args: [{

package/esm2020/common/list.component.mjs

@@ -85,7 +85,7 @@ export class ListComponent {
         return size;
     }
     get scrollHeight() {
-        return (this.dataService.grouped ? this.virtual.total - 1 : this.virtual.total) * this.virtual.itemHeight;
+        return this.virtual.total * this.virtual.itemHeight;
     }
     get overflowY() {
         if (isPresent(this.virtual)) {
@@ -121,8 +121,31 @@ export class ListComponent {
                 this.lastScrollTop = this.content.nativeElement.scrollTop;
             });
         });
+        this.setGroupAttributes();
         this.setOverflow();
     }
+    setGroupAttributes() {
+        const liItems = document.querySelectorAll('li');
+        let isGroup;
+        let childrenliItemsIds = [];
+        let firstGroupReached = false;
+        let previousGroup;
+        liItems.forEach((li, idx) => {
+            isGroup = li.getAttribute('role') === 'group';
+            if (!isGroup && firstGroupReached) {
+                this.renderer.setAttribute(li, 'aria-describedby', previousGroup.getAttribute('id'));
+                childrenliItemsIds.push(li.getAttribute('id'));
+                if (idx + 1 >= liItems.length || liItems[idx + 1]?.getAttribute('role') === 'group') {
+                    this.renderer.setAttribute(previousGroup, 'aria-owns', childrenliItemsIds.join(' '));
+                    childrenliItemsIds = [];
+                }
+            }
+            if (isGroup) {
+                firstGroupReached = true;
+                previousGroup = li;
+            }
+        });
+    }
     ngAfterViewChecked() {
         if (this.virtual) {
             this.positionItems();
@@ -243,6 +266,7 @@ export class ListComponent {
             this.lastLoaded = end;
             this.pageChange.emit({ skip: start, take: this.pageSize });
         });
+        this.setGroupAttributes();
     }
     index(groupIndex, itemIndex) {
         return groupIndex > 0 ? (this.dataService.groupIndices[groupIndex - 1] + itemIndex) : itemIndex;
@@ -267,10 +291,6 @@ export class ListComponent {
         if (this.dataService.grouped) {
             // takes into account the group header items
             flatIndex = this.dataService.flatIndex(index);
-            /* The first group header item is not rendered in the list (see template), so subtract 1 when calulating the flat index.
-               With virtualization enabled, the first group header could be in a previous page, in which case don't subtract anything. */
-            const groupHeaderOffset = this.firstGroupHeaderInTargetedPage(flatIndex) ? -1 : 0;
-            flatIndex += groupHeaderOffset;
         }
         if (this.virtual && flatIndex > -1) {
             this.scrollToIndex(flatIndex);
@@ -386,8 +406,8 @@ export class ListComponent {
     }
 }
 ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, deps: [{ token: i1.DataService }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-    <div *ngIf="dataService.grouped"
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ListComponent, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div *ngIf="dataService.grouped && showStickyHeader"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
             'height.px': virtual?.itemHeight,
@@ -422,7 +442,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [height]="virtual?.itemHeight"
                 [index]="itemIndex + startFrom"
                 [multipleSelection]="multipleSelection"
-                [attr.id]="optionPrefix + '-' + getValue(dataItem)"
+                [attr.id]="optionPrefix + '-' + itemIndex"
                 [attr.tabIndex]="-1"
                 [attr.aria-selected]="isItemSelected(itemIndex)"
                 [class]="listItemClass"
@@ -454,7 +474,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
          <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
                 #li
-                *ngIf="dataItem.header && dataItem.index > 0"
+                *ngIf="dataItem.header"
                 role="group"
                 [class]="listGroupItemClass"
                 [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
@@ -463,7 +483,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     'minHeight.px' : virtual?.itemHeight,
                     'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                 [attr.group-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
+                [attr.id]="optionPrefix + '-' + itemIndex"
                 [attr.tabIndex]="-1">
                     <span [class]="listGroupItemTextClass">
                         <ng-template *ngIf="groupTemplate"
@@ -484,7 +504,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 [index]="dataItem.offsetIndex"
                 [multipleSelection]="multipleSelection"
                 [attr.absolute-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
+                [attr.id]="optionPrefix + '-' + itemIndex"
                 [attr.tabIndex]="-1"
                 [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
                 [class]="listItemClass"
@@ -520,7 +540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             args: [{
                     selector: 'kendo-list',
                     template: `
-    <div *ngIf="dataService.grouped"
+    <div *ngIf="dataService.grouped && showStickyHeader"
         [class]="listGroupStickyHeaderClass"
         [ngStyle]="{
             'height.px': virtual?.itemHeight,
@@ -555,7 +575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [height]="virtual?.itemHeight"
                 [index]="itemIndex + startFrom"
                 [multipleSelection]="multipleSelection"
-                [attr.id]="optionPrefix + '-' + getValue(dataItem)"
+                [attr.id]="optionPrefix + '-' + itemIndex"
                 [attr.tabIndex]="-1"
                 [attr.aria-selected]="isItemSelected(itemIndex)"
                 [class]="listItemClass"
@@ -587,7 +607,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
          <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
             <li
                 #li
-                *ngIf="dataItem.header && dataItem.index > 0"
+                *ngIf="dataItem.header"
                 role="group"
                 [class]="listGroupItemClass"
                 [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
@@ -596,7 +616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     'minHeight.px' : virtual?.itemHeight,
                     'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                 [attr.group-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
+                [attr.id]="optionPrefix + '-' + itemIndex"
                 [attr.tabIndex]="-1">
                     <span [class]="listGroupItemTextClass">
                         <ng-template *ngIf="groupTemplate"
@@ -617,7 +637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [index]="dataItem.offsetIndex"
                 [multipleSelection]="multipleSelection"
                 [attr.absolute-index]="dataItem.index"
-                [attr.id]="optionPrefix + '-' + getValue(dataItem.value)"
+                [attr.id]="optionPrefix + '-' + itemIndex"
                 [attr.tabIndex]="-1"
                 [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
                 [class]="listItemClass"
@@ -685,6 +705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], isActionSheetExpanded: [{
                 type: Input
+            }], showStickyHeader: [{
+                type: Input
             }], data: [{
                 type: Input
             }], size: [{

package/esm2020/dropdownlist/dropdownlist.component.mjs

@@ -109,6 +109,11 @@ export class DropDownListComponent {
          */
         this.caretAltDownIcon = caretAltDownIcon;
         this.listBoxId = `k-${guid()}`;
+        /**
+         * Shows or hides the current group sticky header when using grouped data.
+         * By default the sticky header is displayed.
+         */
+        this.showStickyHeader = true;
         /**
          * Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
          */
@@ -884,7 +889,7 @@ export class DropDownListComponent {
      * @hidden
      */
     get listContainerClasses() {
-        const containerClasses = ['k-list-container', 'k-reset'];
+        const containerClasses = ['k-list-container', 'k-dropdownlist-popup'];
         if (this.popupSettings.popupClass) {
             containerClasses.push(this.popupSettings.popupClass);
         }
@@ -1386,7 +1391,7 @@ export class DropDownListComponent {
     }
 }
 DropDownListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListComponent, 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.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: TOUCH_ENABLED, optional: true }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { iconClass: "iconClass", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click($event)" }, properties: { "attr.aria-controls": "this.ariaControls", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
+DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DropDownListComponent, selector: "kendo-dropdownlist", inputs: { showStickyHeader: "showStickyHeader", iconClass: "iconClass", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", title: "title", subtitle: "subtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click($event)" }, properties: { "attr.aria-controls": "this.ariaControls", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-activedescendant": "this.hostAriaActivedescendant" } }, providers: [
         DROPDOWNLIST_VALUE_ACCESSOR,
         DataService,
         SelectionService,
@@ -1551,6 +1556,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [show]="isOpen"
                 [virtual]="virtual"
                 [ariaLive]="ariaLive"
+                [showStickyHeader]="showStickyHeader"
                 (pageChange)="pageChange($event)">
             </kendo-list>
             <!--no-data template-->
@@ -1571,7 +1577,7 @@ DropDownListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 }">
             </ng-template>
         </ng-template>
-  `, isInline: true, components: [{ type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i10.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
+  `, isInline: true, components: [{ type: i7.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i8.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i9.ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { type: i10.ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "\n    [kendoDropDownListLocalizedMessages],\n    [kendoDropDownTreeLocalizedMessages],\n    [kendoComboBoxLocalizedMessages],\n    [kendoMultiColumnComboBoxLocalizedMessages],\n    [kendoAutoCompleteLocalizedMessages],\n    [kendoMultiSelectLocalizedMessages],\n    [kendoMultiSelectTreeLocalizedMessages]\n  " }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i15.FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i14.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i16.SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DropDownListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1743,6 +1749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [show]="isOpen"
                 [virtual]="virtual"
                 [ariaLive]="ariaLive"
+                [showStickyHeader]="showStickyHeader"
                 (pageChange)="pageChange($event)">
             </kendo-list>
             <!--no-data template-->
@@ -1776,6 +1783,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], ariaControls: [{
                 type: HostBinding,
                 args: ['attr.aria-controls']
+            }], showStickyHeader: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], loading: [{