@progress/kendo-angular-dropdowns 16.4.0-develop.4 → 16.4.0-develop.6

package/autocomplete/autocomplete.component.d.ts

@@ -298,7 +298,7 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     /**
      * Fires each time the value is changed—
      * when the component is blurred or the value is cleared through the **Clear** button
-     * ([see example]({% slug overview_autocomplete %}#toc-events)).
+     * ([see example](slug:events_autocomplete)).
      * When the value of the component is programmatically changed to `ngModel` or `formControl`
      * through its API or form binding, the `valueChange` event is not triggered because it
      * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -307,7 +307,7 @@ export declare class AutoCompleteComponent implements ControlValueAccessor, OnDe
     /**
      * Fires each time the user types in the input field.
      * You can filter the source based on the passed filtration value
-     * ([see example]({% slug overview_autocomplete %}#toc-events)).
+     * ([see example](slug:events_autocomplete)).
      */
     filterChange: EventEmitter<string>;
     /**

package/comboboxes/combobox.component.d.ts

@@ -359,7 +359,7 @@ export declare class ComboBoxComponent extends MultiTabStop implements ControlVa
     /**
      * Fires each time the value is changed—
      * when the component is blurred or the value is cleared through the **Clear** button
-     * ([see example]({% slug overview_combobox %}#toc-events)).
+     * ([see example](slug:events_combobox)).
      * When the value of the component is programmatically changed to `ngModel` or `formControl`
      * through its API or form binding, the `valueChange` event is not triggered because it
      * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -367,13 +367,13 @@ export declare class ComboBoxComponent extends MultiTabStop implements ControlVa
     valueChange: EventEmitter<any>;
     /**
      * Fires each time an item selection is changed
-     * ([see example]({% slug overview_combobox %}#toc-events)).
+     * ([see example](slug:events_combobox)).
      */
     selectionChange: EventEmitter<any>;
     /**
      * Fires each time the user types in the input field.
      * You can filter the source based on the passed filtration value
-     * ([see example]({% slug overview_combobox %}#toc-events)).
+     * ([see example](slug:events_combobox)).
      */
     filterChange: EventEmitter<any>;
     /**

package/common/taglist.component.d.ts

@@ -41,9 +41,8 @@ export declare class TagListComponent {
     removeTag: EventEmitter<any>;
     hostClasses: boolean;
     get hostId(): string;
-    get taglistRole(): string;
+    taglistRole: string;
     multiselectable: boolean;
-    get taglistLabel(): string;
     private _size;
     constructor(renderer: Renderer2, hostElement: ElementRef<HTMLElement>);
     tagProp(tag: any, prop: string | string[], index: number): string;

package/common/templates/custom-item-template.directive.d.ts

@@ -6,7 +6,7 @@ import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Renders the content of the custom list item in the MultiSelect
- * ([see example]({% slug templates_multiselect %}#toc-customizing-the-item-content)).
+ * ([see example](slug:templates_multiselect#toc-rendering-custom-item-content)).
  * The template context is set to the current component.
  * To get a reference to the current text that is typed by the
  * user, use the `let-customItem` directive.

package/common/templates/fixed-group-template.directive.d.ts

@@ -9,11 +9,11 @@ import * as i0 from "@angular/core";
  * with the `kendo<ComponentName>FixedGroupTemplate` directive inside the component tag. The template context is
  * set to the current component. To get a reference to the current data item, use the `let-groupName` directive.
  *
- * - [Using `FixedGroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-fixed-group-template)
+ * - [Using `FixedGroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-fixed-group-header-template)
  *
  * @example
  * ```ts

package/common/templates/group-template.directive.d.ts

@@ -9,11 +9,11 @@ import * as i0 from "@angular/core";
  * with the `kendo<ComponentName>GroupTemplate` directive inside the component tag. The template context is
  * set to the current component. To get a reference to the current data item, use the `let-groupName` directive.
  *
- * - [Using `GroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-group-template)
- * - [Using `GroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-group-template)
- * - [Using `GroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-group-template)
- * - [Using `GroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-group-template)
- * - [Using `GroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-group-template)
+ * - [Using `GroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-group-header-template)
  *
  * @example
  * ```ts

package/dropdownlist/dropdownlist.component.d.ts

@@ -311,12 +311,12 @@ export declare class DropDownListComponent implements ControlValueAccessor, Afte
      */
     leftRightArrowsNavigation: boolean;
     /**
-     * Fires each time the value is changed ([see example]({% slug overview_ddl %}#toc-events)).
+     * Fires each time the value is changed ([see example](slug:events_ddl)).
      */
     valueChange: EventEmitter<any>;
     /**
      * Fires each time the user types in the input field
-     * ([see example]({% slug overview_ddl %}#toc-events)).
+     * ([see example](slug:events_ddl)).
      * You can filter the source based on the passed filtration value.
      * When the value of the component is programmatically changed to `ngModel` or `formControl`
      * through its API or form binding, the `valueChange` event is not triggered because it
@@ -325,7 +325,7 @@ export declare class DropDownListComponent implements ControlValueAccessor, Afte
     filterChange: EventEmitter<any>;
     /**
      * Fires each time the item selection is changed
-     * ([see example]({% slug overview_ddl %}#toc-events)).
+     * ([see example](slug:events_ddl)).
      */
     selectionChange: EventEmitter<any>;
     /**

package/dropdowntrees/dropdowntree.component.d.ts

@@ -138,7 +138,7 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
     onBlur: EventEmitter<any>;
     /**
      * Fires each time the value is changed
-     * ([see example]({% slug overview_ddt %}#toc-events)).
+     * ([see example](slug:events_ddt)).
      */
     valueChange: EventEmitter<any>;
     /**

package/dropdowntrees/multiselecttree.component.d.ts

@@ -384,7 +384,7 @@ export declare class MultiSelectTreeComponent implements OnInit, OnDestroy, OnCh
     nodeCollapse: EventEmitter<TreeItem>;
     /**
      * Fires each time the value is changed
-     * ([see example]({% slug overview_multiselecttree %}#toc-events)).
+     * ([see example](slug:events_multiselecttree)).
      */
     valueChange: EventEmitter<any>;
     /**

package/esm2020/autocomplete/autocomplete.component.mjs

@@ -157,7 +157,7 @@ export class AutoCompleteComponent {
         /**
          * Fires each time the value is changed—
          * when the component is blurred or the value is cleared through the **Clear** button
-         * ([see example]({% slug overview_autocomplete %}#toc-events)).
+         * ([see example](slug:events_autocomplete)).
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
          * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -166,7 +166,7 @@ export class AutoCompleteComponent {
         /**
          * Fires each time the user types in the input field.
          * You can filter the source based on the passed filtration value
-         * ([see example]({% slug overview_autocomplete %}#toc-events)).
+         * ([see example](slug:events_autocomplete)).
          */
         this.filterChange = new EventEmitter();
         /**

package/esm2020/comboboxes/combobox.component.mjs

@@ -214,7 +214,7 @@ export class ComboBoxComponent extends MultiTabStop {
         /**
          * Fires each time the value is changed—
          * when the component is blurred or the value is cleared through the **Clear** button
-         * ([see example]({% slug overview_combobox %}#toc-events)).
+         * ([see example](slug:events_combobox)).
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
          * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -222,13 +222,13 @@ export class ComboBoxComponent extends MultiTabStop {
         this.valueChange = new EventEmitter();
         /**
          * Fires each time an item selection is changed
-         * ([see example]({% slug overview_combobox %}#toc-events)).
+         * ([see example](slug:events_combobox)).
          */
         this.selectionChange = new EventEmitter();
         /**
          * Fires each time the user types in the input field.
          * You can filter the source based on the passed filtration value
-         * ([see example]({% slug overview_combobox %}#toc-events)).
+         * ([see example](slug:events_combobox)).
          */
         this.filterChange = new EventEmitter();
         /**

package/esm2020/common/taglist.component.mjs

@@ -30,6 +30,7 @@ export class TagListComponent {
         this.disabledIndices = new Set();
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
+        this.taglistRole = 'listbox';
         this.multiselectable = true;
         this._size = 'medium';
     }
@@ -46,12 +47,6 @@ export class TagListComponent {
     get hostId() {
         return this.id;
     }
-    get taglistRole() {
-        return 'listbox';
-    }
-    get taglistLabel() {
-        return 'taglist';
-    }
     tagProp(tag, prop, index) {
         const propField = prop && this.getPropField(tag, prop, index);
         return getter(tag, propField);
@@ -77,7 +72,7 @@ export class TagListComponent {
     }
     itemId(tag, index) {
         if (tag) { //because of custom values
-            return this.tagPrefix + "-" + this.tagProp(tag, this.valueField, index);
+            return this.tagPrefix + "-" + index;
         }
     }
     isGroupTag(tag) {
@@ -102,11 +97,11 @@ export class TagListComponent {
     }
 }
 TagListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable", "attr.aria-label": "this.taglistLabel" } }, ngImport: i0, template: `
+TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable" } }, ngImport: i0, template: `
         <div
             *ngFor="let tag of tags; let index = index;"
             [attr.id]="itemId(tag, index)"
-            [attr.aria-hidden]="tagAriaHidden(index)"
+            [attr.aria-selected]="true"
             [attr.role]="'option'"
             class="k-chip"
             [ngClass]="{
@@ -170,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <div
             *ngFor="let tag of tags; let index = index;"
             [attr.id]="itemId(tag, index)"
-            [attr.aria-hidden]="tagAriaHidden(index)"
+            [attr.aria-selected]="true"
             [attr.role]="'option'"
             class="k-chip"
             [ngClass]="{
@@ -272,7 +267,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], multiselectable: [{
                 type: HostBinding,
                 args: ['attr.aria-multiselectable']
-            }], taglistLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
             }] } });

package/esm2020/common/templates/custom-item-template.directive.mjs

@@ -6,7 +6,7 @@ import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Renders the content of the custom list item in the MultiSelect
- * ([see example]({% slug templates_multiselect %}#toc-customizing-the-item-content)).
+ * ([see example](slug:templates_multiselect#toc-rendering-custom-item-content)).
  * The template context is set to the current component.
  * To get a reference to the current text that is typed by the
  * user, use the `let-customItem` directive.

package/esm2020/common/templates/fixed-group-template.directive.mjs

@@ -9,11 +9,11 @@ import * as i0 from "@angular/core";
  * with the `kendo<ComponentName>FixedGroupTemplate` directive inside the component tag. The template context is
  * set to the current component. To get a reference to the current data item, use the `let-groupName` directive.
  *
- * - [Using `FixedGroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-fixed-group-template)
+ * - [Using `FixedGroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-fixed-group-header-template)
  *
  * @example
  * ```ts

package/esm2020/common/templates/group-template.directive.mjs

@@ -9,11 +9,11 @@ import * as i0 from "@angular/core";
  * with the `kendo<ComponentName>GroupTemplate` directive inside the component tag. The template context is
  * set to the current component. To get a reference to the current data item, use the `let-groupName` directive.
  *
- * - [Using `GroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-group-template)
- * - [Using `GroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-group-template)
- * - [Using `GroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-group-template)
- * - [Using `GroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-group-template)
- * - [Using `GroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-group-template)
+ * - [Using `GroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-group-header-template)
  *
  * @example
  * ```ts

package/esm2020/dropdownlist/dropdownlist.component.mjs

@@ -161,12 +161,12 @@ export class DropDownListComponent {
          */
         this.leftRightArrowsNavigation = true;
         /**
-         * Fires each time the value is changed ([see example]({% slug overview_ddl %}#toc-events)).
+         * Fires each time the value is changed ([see example](slug:events_ddl)).
          */
         this.valueChange = new EventEmitter();
         /**
          * Fires each time the user types in the input field
-         * ([see example]({% slug overview_ddl %}#toc-events)).
+         * ([see example](slug:events_ddl)).
          * You can filter the source based on the passed filtration value.
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
@@ -175,7 +175,7 @@ export class DropDownListComponent {
         this.filterChange = new EventEmitter();
         /**
          * Fires each time the item selection is changed
-         * ([see example]({% slug overview_ddl %}#toc-events)).
+         * ([see example](slug:events_ddl)).
          */
         this.selectionChange = new EventEmitter();
         /**

package/esm2020/dropdowntrees/dropdowntree.component.mjs

@@ -118,7 +118,7 @@ export class DropDownTreeComponent {
         this.onBlur = new EventEmitter();
         /**
          * Fires each time the value is changed
-         * ([see example]({% slug overview_ddt %}#toc-events)).
+         * ([see example](slug:events_ddt)).
          */
         this.valueChange = new EventEmitter();
         /**

package/esm2020/dropdowntrees/multiselecttree.component.mjs

@@ -220,7 +220,7 @@ export class MultiSelectTreeComponent {
         this.nodeCollapse = new EventEmitter();
         /**
          * Fires each time the value is changed
-         * ([see example]({% slug overview_multiselecttree %}#toc-events)).
+         * ([see example](slug:events_multiselecttree)).
          */
         this.valueChange = new EventEmitter();
         /**
@@ -360,7 +360,7 @@ export class MultiSelectTreeComponent {
      */
     handleKeydown(event, input) {
         if (event.target === this.filterInput?.nativeElement &&
-            event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight) {
+            (event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight)) {
             return;
         }
         if (input) {
@@ -618,8 +618,7 @@ export class MultiSelectTreeComponent {
         if (!isPresent(this.focusedTagIndex) || this.isOpen) {
             return null;
         }
-        const dataItem = this.tags[this.focusedTagIndex];
-        return `${this.tagPrefix}-${valueFrom({ dataItem }, this.valueField)}`;
+        return this.tagPrefix + '-' + this.focusedTagIndex;
     }
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');

package/esm2020/multiselect/multiselect.component.mjs

@@ -6,7 +6,7 @@ import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndi
 import { SearchBarComponent } from '../common/searchbar.component';
 import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject, Injector } from '@angular/core';
 import { Subscription, Subject, of, merge } from 'rxjs';
-import { catchError, filter, map, tap } from 'rxjs/operators';
+import { catchError, filter, map, take, tap } from 'rxjs/operators';
 import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired } from '@progress/kendo-angular-common';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -242,7 +242,7 @@ export class MultiSelectComponent {
         /**
          * Fires each time the value is changed—
          * when the component is blurred or the value is cleared through the **Clear** button
-         * ([see example]({% slug overview_multiselect %}#toc-events)).
+         * ([see example](slug:events_multiselect)).
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
          * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -772,19 +772,19 @@ export class MultiSelectComponent {
         const focusedTagIndex = this.focusedTagIndex;
         const focusedListIndex = this.selectionService.focused;
         let prefix;
-        let item;
+        let focusedIndex;
         if (isPresent(focusedTagIndex) && !this.isOpen) {
-            item = this.tags[focusedTagIndex];
+            focusedIndex = focusedTagIndex;
             prefix = this.tagPrefix;
         }
         else if (isPresent(focusedListIndex) && focusedListIndex !== -1 && this.isOpen) {
-            item = this.dataService.itemAt(focusedListIndex);
+            focusedIndex = focusedListIndex;
             prefix = this.optionPrefix;
         }
         else {
             return null;
         }
-        return prefix + "-" + getter(item, this.valueField);
+        return prefix + "-" + focusedIndex;
     }
     get clearButtonVisiblity() {
         if (this.touchEnabled) {
@@ -1091,6 +1091,13 @@ export class MultiSelectComponent {
             this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
             this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
         }
+        this._zone.onStable.pipe(take(1)).subscribe(() => {
+            const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby') ||
+                this.searchbar.input.nativeElement.getAttribute('data-kendo-label-id');
+            if (ariaLabel) {
+                this.renderer.setAttribute(this.tagList.hostElement.nativeElement, 'aria-labelledby', ariaLabel);
+            }
+        });
     }
     ngOnDestroy() {
         this._toggle(false);

package/esm2020/package-metadata.mjs

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

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

@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1719995904,
-    version: '16.4.0-develop.4',
+    publishDate: 1720184984,
+    version: '16.4.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -955,11 +955,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * with the `kendo<ComponentName>GroupTemplate` directive inside the component tag. The template context is
  * set to the current component. To get a reference to the current data item, use the `let-groupName` directive.
  *
- * - [Using `GroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-group-template)
- * - [Using `GroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-group-template)
- * - [Using `GroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-group-template)
- * - [Using `GroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-group-template)
- * - [Using `GroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-group-template)
+ * - [Using `GroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-group-header-template)
  *
  * @example
  * ```ts
@@ -1003,11 +1003,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * with the `kendo<ComponentName>FixedGroupTemplate` directive inside the component tag. The template context is
  * set to the current component. To get a reference to the current data item, use the `let-groupName` directive.
  *
- * - [Using `FixedGroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-fixed-group-template)
+ * - [Using `FixedGroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-fixed-group-header-template)
  *
  * @example
  * ```ts
@@ -3107,7 +3107,7 @@ class AutoCompleteComponent {
         /**
          * Fires each time the value is changed&mdash;
          * when the component is blurred or the value is cleared through the **Clear** button
-         * ([see example]({% slug overview_autocomplete %}#toc-events)).
+         * ([see example](slug:events_autocomplete)).
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
          * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -3116,7 +3116,7 @@ class AutoCompleteComponent {
         /**
          * Fires each time the user types in the input field.
          * You can filter the source based on the passed filtration value
-         * ([see example]({% slug overview_autocomplete %}#toc-events)).
+         * ([see example](slug:events_autocomplete)).
          */
         this.filterChange = new EventEmitter();
         /**
@@ -4766,7 +4766,7 @@ class ComboBoxComponent extends MultiTabStop {
         /**
          * Fires each time the value is changed&mdash;
          * when the component is blurred or the value is cleared through the **Clear** button
-         * ([see example]({% slug overview_combobox %}#toc-events)).
+         * ([see example](slug:events_combobox)).
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
          * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -4774,13 +4774,13 @@ class ComboBoxComponent extends MultiTabStop {
         this.valueChange = new EventEmitter();
         /**
          * Fires each time an item selection is changed
-         * ([see example]({% slug overview_combobox %}#toc-events)).
+         * ([see example](slug:events_combobox)).
          */
         this.selectionChange = new EventEmitter();
         /**
          * Fires each time the user types in the input field.
          * You can filter the source based on the passed filtration value
-         * ([see example]({% slug overview_combobox %}#toc-events)).
+         * ([see example](slug:events_combobox)).
          */
         this.filterChange = new EventEmitter();
         /**
@@ -6794,12 +6794,12 @@ class DropDownListComponent {
          */
         this.leftRightArrowsNavigation = true;
         /**
-         * Fires each time the value is changed ([see example]({% slug overview_ddl %}#toc-events)).
+         * Fires each time the value is changed ([see example](slug:events_ddl)).
          */
         this.valueChange = new EventEmitter();
         /**
          * Fires each time the user types in the input field
-         * ([see example]({% slug overview_ddl %}#toc-events)).
+         * ([see example](slug:events_ddl)).
          * You can filter the source based on the passed filtration value.
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
@@ -6808,7 +6808,7 @@ class DropDownListComponent {
         this.filterChange = new EventEmitter();
         /**
          * Fires each time the item selection is changed
-         * ([see example]({% slug overview_ddl %}#toc-events)).
+         * ([see example](slug:events_ddl)).
          */
         this.selectionChange = new EventEmitter();
         /**
@@ -8601,7 +8601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
 /**
  * Renders the content of the custom list item in the MultiSelect
- * ([see example]({% slug templates_multiselect %}#toc-customizing-the-item-content)).
+ * ([see example](slug:templates_multiselect#toc-rendering-custom-item-content)).
  * The template context is set to the current component.
  * To get a reference to the current text that is typed by the
  * user, use the `let-customItem` directive.
@@ -8764,6 +8764,7 @@ class TagListComponent {
         this.disabledIndices = new Set();
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
+        this.taglistRole = 'listbox';
         this.multiselectable = true;
         this._size = 'medium';
     }
@@ -8780,12 +8781,6 @@ class TagListComponent {
     get hostId() {
         return this.id;
     }
-    get taglistRole() {
-        return 'listbox';
-    }
-    get taglistLabel() {
-        return 'taglist';
-    }
     tagProp(tag, prop, index) {
         const propField = prop && this.getPropField(tag, prop, index);
         return getter(tag, propField);
@@ -8811,7 +8806,7 @@ class TagListComponent {
     }
     itemId(tag, index) {
         if (tag) { //because of custom values
-            return this.tagPrefix + "-" + this.tagProp(tag, this.valueField, index);
+            return this.tagPrefix + "-" + index;
         }
     }
     isGroupTag(tag) {
@@ -8836,11 +8831,11 @@ class TagListComponent {
     }
 }
 TagListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable", "attr.aria-label": "this.taglistLabel" } }, ngImport: i0, template: `
+TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable" } }, ngImport: i0, template: `
         <div
             *ngFor="let tag of tags; let index = index;"
             [attr.id]="itemId(tag, index)"
-            [attr.aria-hidden]="tagAriaHidden(index)"
+            [attr.aria-selected]="true"
             [attr.role]="'option'"
             class="k-chip"
             [ngClass]="{
@@ -8904,7 +8899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <div
             *ngFor="let tag of tags; let index = index;"
             [attr.id]="itemId(tag, index)"
-            [attr.aria-hidden]="tagAriaHidden(index)"
+            [attr.aria-selected]="true"
             [attr.role]="'option'"
             class="k-chip"
             [ngClass]="{
@@ -9006,9 +9001,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], multiselectable: [{
                 type: HostBinding,
                 args: ['attr.aria-multiselectable']
-            }], taglistLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
             }] } });
 
 const MULTISELECT_VALUE_ACCESSOR = {
@@ -9196,7 +9188,7 @@ class MultiSelectComponent {
         /**
          * Fires each time the value is changed&mdash;
          * when the component is blurred or the value is cleared through the **Clear** button
-         * ([see example]({% slug overview_multiselect %}#toc-events)).
+         * ([see example](slug:events_multiselect)).
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
          * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -9730,19 +9722,19 @@ class MultiSelectComponent {
         const focusedTagIndex = this.focusedTagIndex;
         const focusedListIndex = this.selectionService.focused;
         let prefix;
-        let item;
+        let focusedIndex;
         if (isPresent(focusedTagIndex) && !this.isOpen) {
-            item = this.tags[focusedTagIndex];
+            focusedIndex = focusedTagIndex;
             prefix = this.tagPrefix;
         }
         else if (isPresent(focusedListIndex) && focusedListIndex !== -1 && this.isOpen) {
-            item = this.dataService.itemAt(focusedListIndex);
+            focusedIndex = focusedListIndex;
             prefix = this.optionPrefix;
         }
         else {
             return null;
         }
-        return prefix + "-" + getter(item, this.valueField);
+        return prefix + "-" + focusedIndex;
     }
     get clearButtonVisiblity() {
         if (this.touchEnabled) {
@@ -10049,6 +10041,13 @@ class MultiSelectComponent {
             this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
             this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
         }
+        this._zone.onStable.pipe(take(1)).subscribe(() => {
+            const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby') ||
+                this.searchbar.input.nativeElement.getAttribute('data-kendo-label-id');
+            if (ariaLabel) {
+                this.renderer.setAttribute(this.tagList.hostElement.nativeElement, 'aria-labelledby', ariaLabel);
+            }
+        });
     }
     ngOnDestroy() {
         this._toggle(false);
@@ -12253,7 +12252,7 @@ class DropDownTreeComponent {
         this.onBlur = new EventEmitter();
         /**
          * Fires each time the value is changed
-         * ([see example]({% slug overview_ddt %}#toc-events)).
+         * ([see example](slug:events_ddt)).
          */
         this.valueChange = new EventEmitter();
         /**
@@ -14576,7 +14575,7 @@ class MultiSelectTreeComponent {
         this.nodeCollapse = new EventEmitter();
         /**
          * Fires each time the value is changed
-         * ([see example]({% slug overview_multiselecttree %}#toc-events)).
+         * ([see example](slug:events_multiselecttree)).
          */
         this.valueChange = new EventEmitter();
         /**
@@ -14717,7 +14716,7 @@ class MultiSelectTreeComponent {
     handleKeydown(event, input) {
         var _a, _b, _c;
         if (event.target === ((_a = this.filterInput) === null || _a === void 0 ? void 0 : _a.nativeElement) &&
-            event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight) {
+            (event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight)) {
             return;
         }
         if (input) {
@@ -14977,8 +14976,7 @@ class MultiSelectTreeComponent {
         if (!isPresent(this.focusedTagIndex) || this.isOpen) {
             return null;
         }
-        const dataItem = this.tags[this.focusedTagIndex];
-        return `${this.tagPrefix}-${valueFrom({ dataItem }, this.valueField)}`;
+        return this.tagPrefix + '-' + this.focusedTagIndex;
     }
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');

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

@@ -38,8 +38,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1719995904,
-    version: '16.4.0-develop.4',
+    publishDate: 1720184984,
+    version: '16.4.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -953,11 +953,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * with the `kendo<ComponentName>GroupTemplate` directive inside the component tag. The template context is
  * set to the current component. To get a reference to the current data item, use the `let-groupName` directive.
  *
- * - [Using `GroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-group-template)
- * - [Using `GroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-group-template)
- * - [Using `GroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-group-template)
- * - [Using `GroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-group-template)
- * - [Using `GroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-group-template)
+ * - [Using `GroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-group-header-template)
+ * - [Using `GroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-group-header-template)
  *
  * @example
  * ```ts
@@ -1001,11 +1001,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * with the `kendo<ComponentName>FixedGroupTemplate` directive inside the component tag. The template context is
  * set to the current component. To get a reference to the current data item, use the `let-groupName` directive.
  *
- * - [Using `FixedGroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-fixed-group-template)
- * - [Using `FixedGroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-fixed-group-template)
+ * - [Using `FixedGroupTemplate` with the AutoComplete]({% slug templates_autocomplete %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the ComboBox]({% slug templates_combobox %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the MultiColumnComboBox]({% slug templates_multicolumncombobox %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the DropDownList]({% slug templates_ddl %}#toc-fixed-group-header-template)
+ * - [Using `FixedGroupTemplate` with the MultiSelect]({% slug templates_multiselect %}#toc-fixed-group-header-template)
  *
  * @example
  * ```ts
@@ -3104,7 +3104,7 @@ class AutoCompleteComponent {
         /**
          * Fires each time the value is changed&mdash;
          * when the component is blurred or the value is cleared through the **Clear** button
-         * ([see example]({% slug overview_autocomplete %}#toc-events)).
+         * ([see example](slug:events_autocomplete)).
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
          * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -3113,7 +3113,7 @@ class AutoCompleteComponent {
         /**
          * Fires each time the user types in the input field.
          * You can filter the source based on the passed filtration value
-         * ([see example]({% slug overview_autocomplete %}#toc-events)).
+         * ([see example](slug:events_autocomplete)).
          */
         this.filterChange = new EventEmitter();
         /**
@@ -4757,7 +4757,7 @@ class ComboBoxComponent extends MultiTabStop {
         /**
          * Fires each time the value is changed&mdash;
          * when the component is blurred or the value is cleared through the **Clear** button
-         * ([see example]({% slug overview_combobox %}#toc-events)).
+         * ([see example](slug:events_combobox)).
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
          * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -4765,13 +4765,13 @@ class ComboBoxComponent extends MultiTabStop {
         this.valueChange = new EventEmitter();
         /**
          * Fires each time an item selection is changed
-         * ([see example]({% slug overview_combobox %}#toc-events)).
+         * ([see example](slug:events_combobox)).
          */
         this.selectionChange = new EventEmitter();
         /**
          * Fires each time the user types in the input field.
          * You can filter the source based on the passed filtration value
-         * ([see example]({% slug overview_combobox %}#toc-events)).
+         * ([see example](slug:events_combobox)).
          */
         this.filterChange = new EventEmitter();
         /**
@@ -6779,12 +6779,12 @@ class DropDownListComponent {
          */
         this.leftRightArrowsNavigation = true;
         /**
-         * Fires each time the value is changed ([see example]({% slug overview_ddl %}#toc-events)).
+         * Fires each time the value is changed ([see example](slug:events_ddl)).
          */
         this.valueChange = new EventEmitter();
         /**
          * Fires each time the user types in the input field
-         * ([see example]({% slug overview_ddl %}#toc-events)).
+         * ([see example](slug:events_ddl)).
          * You can filter the source based on the passed filtration value.
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
@@ -6793,7 +6793,7 @@ class DropDownListComponent {
         this.filterChange = new EventEmitter();
         /**
          * Fires each time the item selection is changed
-         * ([see example]({% slug overview_ddl %}#toc-events)).
+         * ([see example](slug:events_ddl)).
          */
         this.selectionChange = new EventEmitter();
         /**
@@ -8579,7 +8579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 
 /**
  * Renders the content of the custom list item in the MultiSelect
- * ([see example]({% slug templates_multiselect %}#toc-customizing-the-item-content)).
+ * ([see example](slug:templates_multiselect#toc-rendering-custom-item-content)).
  * The template context is set to the current component.
  * To get a reference to the current text that is typed by the
  * user, use the `let-customItem` directive.
@@ -8742,6 +8742,7 @@ class TagListComponent {
         this.disabledIndices = new Set();
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
+        this.taglistRole = 'listbox';
         this.multiselectable = true;
         this._size = 'medium';
     }
@@ -8758,12 +8759,6 @@ class TagListComponent {
     get hostId() {
         return this.id;
     }
-    get taglistRole() {
-        return 'listbox';
-    }
-    get taglistLabel() {
-        return 'taglist';
-    }
     tagProp(tag, prop, index) {
         const propField = prop && this.getPropField(tag, prop, index);
         return getter(tag, propField);
@@ -8789,7 +8784,7 @@ class TagListComponent {
     }
     itemId(tag, index) {
         if (tag) { //because of custom values
-            return this.tagPrefix + "-" + this.tagProp(tag, this.valueField, index);
+            return this.tagPrefix + "-" + index;
         }
     }
     isGroupTag(tag) {
@@ -8814,11 +8809,11 @@ class TagListComponent {
     }
 }
 TagListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable", "attr.aria-label": "this.taglistLabel" } }, ngImport: i0, template: `
+TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable" } }, ngImport: i0, template: `
         <div
             *ngFor="let tag of tags; let index = index;"
             [attr.id]="itemId(tag, index)"
-            [attr.aria-hidden]="tagAriaHidden(index)"
+            [attr.aria-selected]="true"
             [attr.role]="'option'"
             class="k-chip"
             [ngClass]="{
@@ -8882,7 +8877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         <div
             *ngFor="let tag of tags; let index = index;"
             [attr.id]="itemId(tag, index)"
-            [attr.aria-hidden]="tagAriaHidden(index)"
+            [attr.aria-selected]="true"
             [attr.role]="'option'"
             class="k-chip"
             [ngClass]="{
@@ -8984,9 +8979,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], multiselectable: [{
                 type: HostBinding,
                 args: ['attr.aria-multiselectable']
-            }], taglistLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
             }] } });
 
 const MULTISELECT_VALUE_ACCESSOR = {
@@ -9174,7 +9166,7 @@ class MultiSelectComponent {
         /**
          * Fires each time the value is changed&mdash;
          * when the component is blurred or the value is cleared through the **Clear** button
-         * ([see example]({% slug overview_multiselect %}#toc-events)).
+         * ([see example](slug:events_multiselect)).
          * When the value of the component is programmatically changed to `ngModel` or `formControl`
          * through its API or form binding, the `valueChange` event is not triggered because it
          * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.
@@ -9704,19 +9696,19 @@ class MultiSelectComponent {
         const focusedTagIndex = this.focusedTagIndex;
         const focusedListIndex = this.selectionService.focused;
         let prefix;
-        let item;
+        let focusedIndex;
         if (isPresent(focusedTagIndex) && !this.isOpen) {
-            item = this.tags[focusedTagIndex];
+            focusedIndex = focusedTagIndex;
             prefix = this.tagPrefix;
         }
         else if (isPresent(focusedListIndex) && focusedListIndex !== -1 && this.isOpen) {
-            item = this.dataService.itemAt(focusedListIndex);
+            focusedIndex = focusedListIndex;
             prefix = this.optionPrefix;
         }
         else {
             return null;
         }
-        return prefix + "-" + getter(item, this.valueField);
+        return prefix + "-" + focusedIndex;
     }
     get clearButtonVisiblity() {
         if (this.touchEnabled) {
@@ -10023,6 +10015,13 @@ class MultiSelectComponent {
             this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
             this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
         }
+        this._zone.onStable.pipe(take(1)).subscribe(() => {
+            const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby') ||
+                this.searchbar.input.nativeElement.getAttribute('data-kendo-label-id');
+            if (ariaLabel) {
+                this.renderer.setAttribute(this.tagList.hostElement.nativeElement, 'aria-labelledby', ariaLabel);
+            }
+        });
     }
     ngOnDestroy() {
         this._toggle(false);
@@ -12223,7 +12222,7 @@ class DropDownTreeComponent {
         this.onBlur = new EventEmitter();
         /**
          * Fires each time the value is changed
-         * ([see example]({% slug overview_ddt %}#toc-events)).
+         * ([see example](slug:events_ddt)).
          */
         this.valueChange = new EventEmitter();
         /**
@@ -14539,7 +14538,7 @@ class MultiSelectTreeComponent {
         this.nodeCollapse = new EventEmitter();
         /**
          * Fires each time the value is changed
-         * ([see example]({% slug overview_multiselecttree %}#toc-events)).
+         * ([see example](slug:events_multiselecttree)).
          */
         this.valueChange = new EventEmitter();
         /**
@@ -14679,7 +14678,7 @@ class MultiSelectTreeComponent {
      */
     handleKeydown(event, input) {
         if (event.target === this.filterInput?.nativeElement &&
-            event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight) {
+            (event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight)) {
             return;
         }
         if (input) {
@@ -14937,8 +14936,7 @@ class MultiSelectTreeComponent {
         if (!isPresent(this.focusedTagIndex) || this.isOpen) {
             return null;
         }
-        const dataItem = this.tags[this.focusedTagIndex];
-        return `${this.tagPrefix}-${valueFrom({ dataItem }, this.valueField)}`;
+        return this.tagPrefix + '-' + this.focusedTagIndex;
     }
     set isFocused(isFocused) {
         this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');

package/multiselect/multiselect.component.d.ts

@@ -420,7 +420,7 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
     /**
      * Fires each time the value is changed—
      * when the component is blurred or the value is cleared through the **Clear** button
-     * ([see example]({% slug overview_multiselect %}#toc-events)).
+     * ([see example](slug:events_multiselect)).
      * When the value of the component is programmatically changed to `ngModel` or `formControl`
      * through its API or form binding, the `valueChange` event is not triggered because it
      * might cause a mix-up with the built-in `valueChange` mechanisms of the `ngModel` or `formControl` bindings.

package/package.json

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

package/schematics/ngAdd/index.js

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