@progress/kendo-angular-dropdowns 20.1.2-develop.2 → 21.0.0-develop.11

package/esm2022/common/adaptive-renderer.component.mjs

@@ -65,8 +65,8 @@ export class AdaptiveRendererComponent {
     get windowSize() {
         return this.adaptiveService.size;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
             #actionSheet
             [animation]="{ duration: animationDuration }"
@@ -132,7 +132,7 @@ export class AdaptiveRendererComponent {
         </kendo-actionsheet>
     `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-adaptive-renderer',
@@ -204,7 +204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, NgIf, TextBoxComponent, TextBoxPrefixTemplateDirective, IconComponent, NgTemplateOutlet]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.AdaptiveService }]; }, propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.AdaptiveService }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input

package/esm2022/common/data.service.mjs

@@ -242,9 +242,9 @@ export class DataService {
         }
         return flat;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataService, decorators: [{
             type: Injectable
         }] });

package/esm2022/common/disabled-items/disabled-items.service.mjs

@@ -39,9 +39,9 @@ export class DisabledItemsService {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisabledItemsService, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisabledItemsService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DisabledItemsService, deps: [{ token: i1.DataService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DisabledItemsService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DisabledItemsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DisabledItemsService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.DataService }]; } });
+        }], ctorParameters: () => [{ type: i1.DataService }] });

package/esm2022/common/filter-input.directive.mjs

@@ -23,17 +23,17 @@ export class FilterInputDirective {
     nextTick(fn) {
         this.zone.runOutsideAngular(() => setTimeout(fn));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterInputDirective, isStandalone: true, selector: "[filterInput]", inputs: { focused: ["filterInput", "focused"] }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: FilterInputDirective, isStandalone: true, selector: "[filterInput]", inputs: { focused: ["filterInput", "focused"] }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[filterInput]' // eslint-disable-line
                     ,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { focused: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { focused: [{
                 type: Input,
                 args: ['filterInput']
             }] } });

package/esm2022/common/filtering/filter.directive.mjs

@@ -117,16 +117,16 @@ export class FilterDirective {
         const providedFields = isPresent(settings) && typeof settings === 'object' ? settings.fields : [];
         return Object.assign({}, DEFAULT_FILTER_SETTINGS, settings, { fields: this.getFilterFields(providedFields) });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterDirective, deps: [{ token: i1.FilterableComponent }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterDirective, isStandalone: true, selector: "[kendoDropDownFilter]", inputs: { data: "data", rawSettings: ["kendoDropDownFilter", "rawSettings"], filterable: "filterable" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDirective, deps: [{ token: i1.FilterableComponent }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: FilterDirective, isStandalone: true, selector: "[kendoDropDownFilter]", inputs: { data: "data", rawSettings: ["kendoDropDownFilter", "rawSettings"], filterable: "filterable" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDropDownFilter]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FilterableComponent }]; }, propDecorators: { data: [{
+        }], ctorParameters: () => [{ type: i1.FilterableComponent }], propDecorators: { data: [{
                 type: Input
             }], rawSettings: [{
                 type: Input,

package/esm2022/common/list-item.directive.mjs

@@ -12,14 +12,14 @@ export class ListItemDirective {
     constructor(element) {
         this.element = element;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group]\"", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group], li[role=presentation]\"", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '"li[role=option], li[role=group]"' // eslint-disable-line
+                    selector: '"li[role=option], li[role=group], li[role=presentation]"' // eslint-disable-line
                     ,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });

package/esm2022/common/list.component.mjs

@@ -61,7 +61,19 @@ export class ListComponent {
     allowCustom;
     defaultItem;
     set data(data) {
-        this._data = data[0] && data[0].header ? data.slice(0) : data;
+        this._data = data[0]?.header ? data.slice(0) : data;
+        if (this.dataService.grouped) {
+            if (this.virtual) {
+                const firstGroupItem = this.dataService.data.find(item => item.header && item.groupIndex === this.data[0].groupIndex);
+                if (!this.data[0].header) {
+                    this._data = [firstGroupItem, ...this._data.slice(1)];
+                }
+            }
+            this.groupedData = this._data.filter(item => item?.header);
+            this.groupedData.forEach(group => {
+                group.items = this._data.filter(item => !item.header && item.groupIndex === group.groupIndex);
+            });
+        }
     }
     get data() {
         return this._data;
@@ -78,6 +90,7 @@ export class ListComponent {
     get size() {
         return this._size;
     }
+    groupedData;
     rounded = 'medium';
     onClick = new EventEmitter();
     pageChange = new EventEmitter();
@@ -157,9 +170,6 @@ export class ListComponent {
                 this.scrollToFocused = !changes['data'].isFirstChange();
             }
             this.setOverflow();
-            this.zone.onStable.pipe(take(1)).subscribe(() => {
-                this.setGroupAttributes();
-            });
         }
         if (isChanged('virtual', changes, false)) {
             this.setOverflow();
@@ -175,31 +185,8 @@ 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();
@@ -274,7 +261,7 @@ export class ListComponent {
         const item = this.firstVisibleItem();
         if (item) {
             let index;
-            if (item.getAttribute("role") === "group") {
+            if (item.getAttribute("role") === "presentation") {
                 index = parseInt(item.getAttribute("group-index"), 10);
                 this.currentGroup = this.dataService.groupAt(index)?.value;
             }
@@ -320,7 +307,6 @@ 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;
@@ -331,6 +317,9 @@ export class ListComponent {
     getValue(dataItem) {
         return getter(dataItem, this.valueField);
     }
+    generateGroupId(dataItem) {
+        return `${this.optionPrefix}-${dataItem.groupIndex}-${dataItem.value.toString().split(' ').join('')}`;
+    }
     isDisabled(index) {
         if (isPresent(this.virtual) && !this.dataService.grouped) {
             index += this.virtual.skip;
@@ -441,15 +430,6 @@ export class ListComponent {
             this.renderer.setStyle(item.element.nativeElement, "transform", `translateY(${offsetY}px`);
         });
     }
-    /**
-     * Indicates whether the first group header from the data set is in the targeted virtual page.
-     */
-    firstGroupHeaderInTargetedPage(itemIndex) {
-        if (!isPresent(this.virtual)) {
-            return true;
-        }
-        return this.virtual.skip === 0 && (this.virtual.pageSize > itemIndex);
-    }
     setComponentClasses() {
         if (this.type === 'list') {
             this.renderer.addClass(this.wrapper.nativeElement, 'k-list');
@@ -464,8 +444,8 @@ export class ListComponent {
             this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.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 }, { token: i4.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListComponent, isStandalone: true, 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", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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 }, { token: i4.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, 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", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div *ngIf="defaultItem && !template"
         class="k-list-optionlabel"
         [ngClass]="{ 'k-disabled': isDisabledDefaultItem }"
@@ -519,15 +499,22 @@ export class ListComponent {
         [class]="listContentClass"
         [style.maxHeight.px]="height"
         unselectable="on"
-        (scroll)="popupListScroll.emit($event)">
+        (scroll)="popupListScroll.emit($event)"
+        [attr.role]="dataService.grouped ? 'listbox' : null"
+        [attr.id]="dataService.grouped ? id : null"
+        [attr.aria-live]="dataService.grouped ? ariaLive : null"
+        [attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
+        [attr.aria-hidden]="dataService.grouped ? !show : null"
+        >
         <ul #list
-            role="listbox"
+            *ngIf="!dataService.grouped"
+            [attr.role]="'listbox'"
             [class]="listClass"
             [attr.id]="id"
             [attr.aria-live]="ariaLive"
             [attr.aria-multiselectable]="isMultiselect"
             [attr.aria-hidden]="!show">
-            <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
+            <ng-container *ngFor="let dataItem of data; let itemIndex = index">
                 <li
                     role="option"
                     kendoDropDownsSelectable
@@ -563,75 +550,83 @@ export class ListComponent {
                     </ng-template>
                     <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
                 </li>
-            </ng-template>
-            <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
-                <li
-                    #li
-                    *ngIf="dataItem.header"
-                    role="group"
+            </ng-container>
+            <kendo-resize-sensor
+                *ngIf="!virtual"
+                (resize)="listResize.emit()"
+            >
+            </kendo-resize-sensor>
+        </ul>
+
+        <ng-container *ngIf="dataService.grouped" #list>
+            <ul *ngFor="let dataItem of groupedData"
+                #groupUl
+                class="k-list-ul"
+                [attr.role]="'group'"
+                [attr.aria-labelledby]="generateGroupId(dataItem)"
+                >
+                <li *ngIf="dataItem.header"
+                    role="presentation"
                     [class]="listGroupItemClass"
-                    [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
+                    [class.k-table-alt-row]="isAltRow(dataItem.index - 1)"
                     [ngStyle]="{
                         'height.px': virtual?.itemHeight,
                         'minHeight.px' : virtual?.itemHeight,
                         'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                     [attr.group-index]="dataItem.index"
-                    [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.toString().split(' ').join('')"
-                    [attr.tabIndex]="-1"
-                    [style.width.px]="rowWidth ?? null">
-                        <span [class]="listGroupItemTextClass">
-                            <ng-template *ngIf="groupTemplate"
-                                [templateContext]="{
-                                    templateRef: groupTemplate.templateRef,
-                                    $implicit: dataItem.value
-                            }">
-                            </ng-template>
-                            <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
-                        </span>
+                    [attr.id]="groupUl.getAttribute('aria-labelledby')"
+                    [style.width.px]="rowWidth ?? null"
+                    >
+                    <span [class]="listGroupItemTextClass">
+                        <ng-template *ngIf="groupTemplate"
+                            [templateContext]="{
+                                templateRef: groupTemplate.templateRef,
+                                $implicit: dataItem.value
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
+                    </span>
                 </li>
-                <li
-                    #li
-                    *ngIf="!dataItem.header"
+                <li *ngFor="let item of dataItem.items"
                     role="option"
                     kendoDropDownsSelectable
                     [height]="virtual?.itemHeight"
-                    [index]="dataItem.offsetIndex"
+                    [index]="item.offsetIndex"
                     [multipleSelection]="multipleSelection"
-                    [attr.absolute-index]="dataItem.index"
-                    [attr.id]="optionPrefix + '-' + (itemIndex - 1 - dataItem.groupIndex)"
+                    [attr.absolute-index]="item.index"
+                    [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
                     [attr.tabIndex]="-1"
-                    [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
+                    [attr.aria-selected]="isItemSelected(item.offsetIndex)"
                     [class]="listItemClass"
                     [ngClass]="{
-                        'k-disabled': isDisabled(dataItem.offsetIndex),
-                        'k-table-alt-row': isAltRow(itemIndex - 1)
+                        'k-disabled': isDisabled(item.offsetIndex),
+                        'k-table-alt-row': isAltRow(item.index - 1)
                     }"
-                    [style.width.px]="rowWidth ?? null"
-                >
+                    [style.width.px]="rowWidth ?? null">
                     <ng-template *ngIf="template"
                         [templateContext]="{
                             templateRef: template.templateRef,
-                            $implicit: dataItem.value
+                            $implicit: item.value
                         }">
                     </ng-template>
-                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
+                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(item.value) }}</span></ng-template>
                 </li>
-            </ng-template>
-            <kendo-resize-sensor
-                *ngIf="!virtual"
-                (resize)="listResize.emit()"
-            >
-            </kendo-resize-sensor>
-        </ul>
+                <kendo-resize-sensor
+                    *ngIf="!virtual"
+                    (resize)="listResize.emit()"
+                >
+                </kendo-resize-sensor>
+            </ul>
+        </ng-container>
         <div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
             <div [style.height.px]="scrollHeight">
                 <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
             </div>
         </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group], li[role=presentation]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-list',
@@ -689,15 +684,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         [class]="listContentClass"
         [style.maxHeight.px]="height"
         unselectable="on"
-        (scroll)="popupListScroll.emit($event)">
+        (scroll)="popupListScroll.emit($event)"
+        [attr.role]="dataService.grouped ? 'listbox' : null"
+        [attr.id]="dataService.grouped ? id : null"
+        [attr.aria-live]="dataService.grouped ? ariaLive : null"
+        [attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
+        [attr.aria-hidden]="dataService.grouped ? !show : null"
+        >
         <ul #list
-            role="listbox"
+            *ngIf="!dataService.grouped"
+            [attr.role]="'listbox'"
             [class]="listClass"
             [attr.id]="id"
             [attr.aria-live]="ariaLive"
             [attr.aria-multiselectable]="isMultiselect"
             [attr.aria-hidden]="!show">
-            <ng-template *ngIf="!dataService.grouped && show" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
+            <ng-container *ngFor="let dataItem of data; let itemIndex = index">
                 <li
                     role="option"
                     kendoDropDownsSelectable
@@ -733,66 +735,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     </ng-template>
                     <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
                 </li>
-            </ng-template>
-            <ng-template *ngIf="dataService.grouped" ngFor let-dataItem let-itemIndex="index" [ngForOf]="data">
-                <li
-                    #li
-                    *ngIf="dataItem.header"
-                    role="group"
+            </ng-container>
+            <kendo-resize-sensor
+                *ngIf="!virtual"
+                (resize)="listResize.emit()"
+            >
+            </kendo-resize-sensor>
+        </ul>
+
+        <ng-container *ngIf="dataService.grouped" #list>
+            <ul *ngFor="let dataItem of groupedData"
+                #groupUl
+                class="k-list-ul"
+                [attr.role]="'group'"
+                [attr.aria-labelledby]="generateGroupId(dataItem)"
+                >
+                <li *ngIf="dataItem.header"
+                    role="presentation"
                     [class]="listGroupItemClass"
-                    [class.k-table-alt-row]="isAltRow(itemIndex - 1)"
+                    [class.k-table-alt-row]="isAltRow(dataItem.index - 1)"
                     [ngStyle]="{
                         'height.px': virtual?.itemHeight,
                         'minHeight.px' : virtual?.itemHeight,
                         'boxSizing' : virtual ? 'border-box' : 'inherit'}"
                     [attr.group-index]="dataItem.index"
-                    [attr.id]="optionPrefix + '-' + dataItem.groupIndex + '-' + dataItem.value.toString().split(' ').join('')"
-                    [attr.tabIndex]="-1"
-                    [style.width.px]="rowWidth ?? null">
-                        <span [class]="listGroupItemTextClass">
-                            <ng-template *ngIf="groupTemplate"
-                                [templateContext]="{
-                                    templateRef: groupTemplate.templateRef,
-                                    $implicit: dataItem.value
-                            }">
-                            </ng-template>
-                            <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
-                        </span>
+                    [attr.id]="groupUl.getAttribute('aria-labelledby')"
+                    [style.width.px]="rowWidth ?? null"
+                    >
+                    <span [class]="listGroupItemTextClass">
+                        <ng-template *ngIf="groupTemplate"
+                            [templateContext]="{
+                                templateRef: groupTemplate.templateRef,
+                                $implicit: dataItem.value
+                        }">
+                        </ng-template>
+                        <ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
+                    </span>
                 </li>
-                <li
-                    #li
-                    *ngIf="!dataItem.header"
+                <li *ngFor="let item of dataItem.items"
                     role="option"
                     kendoDropDownsSelectable
                     [height]="virtual?.itemHeight"
-                    [index]="dataItem.offsetIndex"
+                    [index]="item.offsetIndex"
                     [multipleSelection]="multipleSelection"
-                    [attr.absolute-index]="dataItem.index"
-                    [attr.id]="optionPrefix + '-' + (itemIndex - 1 - dataItem.groupIndex)"
+                    [attr.absolute-index]="item.index"
+                    [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
                     [attr.tabIndex]="-1"
-                    [attr.aria-selected]="isItemSelected(dataItem.offsetIndex)"
+                    [attr.aria-selected]="isItemSelected(item.offsetIndex)"
                     [class]="listItemClass"
                     [ngClass]="{
-                        'k-disabled': isDisabled(dataItem.offsetIndex),
-                        'k-table-alt-row': isAltRow(itemIndex - 1)
+                        'k-disabled': isDisabled(item.offsetIndex),
+                        'k-table-alt-row': isAltRow(item.index - 1)
                     }"
-                    [style.width.px]="rowWidth ?? null"
-                >
+                    [style.width.px]="rowWidth ?? null">
                     <ng-template *ngIf="template"
                         [templateContext]="{
                             templateRef: template.templateRef,
-                            $implicit: dataItem.value
+                            $implicit: item.value
                         }">
                     </ng-template>
-                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem.value) }}</span></ng-template>
+                    <ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(item.value) }}</span></ng-template>
                 </li>
-            </ng-template>
-            <kendo-resize-sensor
-                *ngIf="!virtual"
-                (resize)="listResize.emit()"
-            >
-            </kendo-resize-sensor>
-        </ul>
+                <kendo-resize-sensor
+                    *ngIf="!virtual"
+                    (resize)="listResize.emit()"
+                >
+                </kendo-resize-sensor>
+            </ul>
+        </ng-container>
         <div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
             <div [style.height.px]="scrollHeight">
                 <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
@@ -803,7 +813,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgIf, NgStyle, TemplateContextDirective, NgFor, ListItemDirective, SelectableDirective, NgClass, ResizeSensorComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i0.ElementRef }, { type: i2.SelectionService }, { type: i3.DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i4.LocalizationService }]; }, propDecorators: { selected: [{
+        }], ctorParameters: () => [{ type: i1.DataService }, { type: i0.ElementRef }, { type: i2.SelectionService }, { type: i3.DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i4.LocalizationService }], propDecorators: { selected: [{
                 type: Input
             }], focused: [{
                 type: Input
@@ -873,8 +883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['content', { static: true }]
             }], list: [{
                 type: ViewChild,
-                args: ['list', { static: true }]
+                args: ['list']
             }], virtualContainer: [{
                 type: ViewChild,
-                args: ['virtualContainer', { static: false }]
+                args: ['virtualContainer']
             }] } });

package/esm2022/common/localization/custom-messages.component.mjs

@@ -72,15 +72,15 @@ export class CustomMessagesComponent extends Messages {
     get override() {
         return true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-dropdownlist-messages,kendo-combobox-messages,kendo-multicolumncombobox-messages,kendo-autocomplete-messages,kendo-multiselect-messages,kendo-dropdowntree-messages,kendo-multiselecttree-messages", providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-dropdownlist-messages,kendo-combobox-messages,kendo-multicolumncombobox-messages,kendo-autocomplete-messages,kendo-multiselect-messages,kendo-dropdowntree-messages,kendo-multiselecttree-messages", providers: [
             {
                 provide: Messages,
                 useExisting: forwardRef(() => CustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
@@ -93,4 +93,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: ``,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: () => [{ type: i1.LocalizationService }] });