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

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

@@ -37,8 +37,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761752831,
-    version: '21.0.0-develop.2',
+    publishDate: 1762426753,
+    version: '21.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1771,12 +1771,12 @@ class ListItemDirective {
         this.element = element;
     }
     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]\"", ngImport: i0 });
+    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: "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
                 }]
@@ -1938,7 +1938,19 @@ 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;
@@ -1955,6 +1967,7 @@ class ListComponent {
     get size() {
         return this._size;
     }
+    groupedData;
     rounded = 'medium';
     onClick = new EventEmitter();
     pageChange = new EventEmitter();
@@ -2034,9 +2047,6 @@ 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();
@@ -2052,31 +2062,8 @@ 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();
@@ -2151,7 +2138,7 @@ 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;
             }
@@ -2197,7 +2184,6 @@ 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;
@@ -2208,6 +2194,9 @@ 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;
@@ -2318,15 +2307,6 @@ 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');
@@ -2342,7 +2322,7 @@ class ListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.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, static: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    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 }"
@@ -2396,15 +2376,22 @@ 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
@@ -2440,73 +2427,81 @@ 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: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
@@ -2566,15 +2561,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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
@@ -2610,66 +2612,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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>
@@ -2750,10 +2760,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['content', { static: true }]
             }], list: [{
                 type: ViewChild,
-                args: ['list', { static: true }]
+                args: ['list']
             }], virtualContainer: [{
                 type: ViewChild,
-                args: ['virtualContainer', { static: false }]
+                args: ['virtualContainer']
             }] } });
 
 /**
@@ -4225,7 +4235,9 @@ class AutoCompleteComponent {
         }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+            if (!this.dataService.grouped) {
+                setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+            }
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -4303,7 +4315,9 @@ class AutoCompleteComponent {
     openActionSheet() {
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+        if (!this.dataService.grouped) {
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+        }
         this.adaptiveTitle = setActionSheetTitle(this.searchbar.input, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.opened.emit();
@@ -6249,7 +6263,9 @@ class ComboBoxComponent extends MultiTabStop {
         }
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+            if (!this.dataService.grouped) {
+                setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+            }
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -6337,7 +6353,9 @@ class ComboBoxComponent extends MultiTabStop {
         this.windowSize = this.adaptiveService.size;
         this.actionSheet.toggle(true);
         this.cdr.detectChanges();
-        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+        if (!this.dataService.grouped) {
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+        }
         this.adaptiveTitle = setActionSheetTitle(this.searchbar.input, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.opened.emit();
@@ -7918,14 +7936,11 @@ class DropDownListComponent {
             this.renderer.setAttribute(popupWrapper, 'role', 'region');
             this.renderer.setAttribute(popupWrapper, 'aria-label', this.messageFor('popupLabel'));
         }
-        const listBox = popupWrapper.querySelector('ul.k-list-ul');
-        const ariaLabel = this.wrapper.nativeElement.getAttribute('aria-labelledby');
-        if (ariaLabel) {
-            listBox.setAttribute('aria-labelledby', ariaLabel);
-        }
         this.subs.add(this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
+            if (!this.dataService.grouped) {
+                setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
+            }
             this.setAriaactivedescendant();
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
@@ -8384,7 +8399,9 @@ class DropDownListComponent {
         this.cdr.detectChanges();
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
         this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
-        setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
+        if (!this.dataService.grouped) {
+            setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
+        }
         this.setAriaactivedescendant();
         this.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
         this.cdr.detectChanges();
@@ -10927,7 +10944,9 @@ class MultiSelectComponent {
         popupWrapper.setAttribute("dir", this.direction);
         this.popupRef.popupOpen.subscribe(() => {
             this.cdr.detectChanges();
-            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+            if (!this.dataService.grouped) {
+                setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+            }
             this.optionsList.scrollToItem(this.selectionService.focused);
             this.selectionService.focus(this.selectionService.focused);
             this.opened.emit();
@@ -10988,7 +11007,9 @@ class MultiSelectComponent {
         // Stores the current value state until the user either accepts or cancels it
         this._valueHolder = [...this.value];
         this.cdr.detectChanges();
-        setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+        if (!this.dataService.grouped) {
+            setListBoxAriaLabelledBy(this.optionsList, this.searchbar.input, this.renderer);
+        }
         this.adaptiveTitle = setActionSheetTitle(this.searchbar.input, this.adaptiveTitle);
         this.cdr.detectChanges();
         this.opened.emit();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-dropdowns",
-  "version": "21.0.0-develop.2",
+  "version": "21.0.0-develop.21",
   "description": "A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree ",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -100,7 +100,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1761752831,
+      "publishDate": 1762426753,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -111,18 +111,18 @@
     "@angular/forms": "18 - 20",
     "@angular/platform-browser": "18 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-common": "21.0.0-develop.2",
-    "@progress/kendo-angular-utils": "21.0.0-develop.2",
-    "@progress/kendo-angular-l10n": "21.0.0-develop.2",
-    "@progress/kendo-angular-navigation": "21.0.0-develop.2",
-    "@progress/kendo-angular-popup": "21.0.0-develop.2",
-    "@progress/kendo-angular-icons": "21.0.0-develop.2",
-    "@progress/kendo-angular-treeview": "21.0.0-develop.2",
+    "@progress/kendo-angular-common": "21.0.0-develop.21",
+    "@progress/kendo-angular-utils": "21.0.0-develop.21",
+    "@progress/kendo-angular-l10n": "21.0.0-develop.21",
+    "@progress/kendo-angular-navigation": "21.0.0-develop.21",
+    "@progress/kendo-angular-popup": "21.0.0-develop.21",
+    "@progress/kendo-angular-icons": "21.0.0-develop.21",
+    "@progress/kendo-angular-treeview": "21.0.0-develop.21",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.0.0-develop.2",
+    "@progress/kendo-angular-schematics": "21.0.0-develop.21",
     "@progress/kendo-common": "^1.0.1",
     "node-html-parser": "^7.0.1"
   },

package/schematics/ngAdd/index.js

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