@progress/kendo-angular-dropdowns 6.0.1 → 6.0.2-dev.202202221633

package/dist/fesm2015/index.js

@@ -23,7 +23,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dropdowns',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1642685068,
+    publishDate: 1645547418,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -343,6 +343,9 @@ let SearchBarComponent = class SearchBarComponent {
     get placeholder() {
         return this._placeholder;
     }
+    get ariaExpanded() {
+        return this.role === 'combobox' ? this.popupOpen : null;
+    }
     ngOnInit() {
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(({ rtl }) => this.direction = rtl ? 'rtl' : 'ltr');
@@ -542,7 +545,7 @@ SearchBarComponent = __decorate([
             [attr.aria-disabled]="disabled"
             [attr.aria-readonly]="readonly"
             aria-haspopup="listbox"
-            [attr.aria-expanded]="popupOpen"
+            [attr.aria-expanded]="ariaExpanded"
             [attr.aria-owns]="listId"
             [attr.aria-describedby]="tagListId"
             [attr.aria-activedescendant]="activeDescendant"
@@ -2207,12 +2210,9 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
     }
     get noDataLabel() {
         if (this.data.length === 0) {
-            return this.noDataText;
+            return this.messageFor('noDataText');
         }
     }
-    get clearTitle() {
-        return this.localization.get('clearTitle');
-    }
     /**
      * Sets the data of the AutoComplete.
      *
@@ -2381,15 +2381,13 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
             .changes
             .subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-            this.setMessages();
+            this.cdr.detectChanges();
         });
-        this.setMessages();
         this.setComponentClasses();
     }
     ngOnDestroy() {
         this.destroyPopup();
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
         if (this.localizationChangeSubscription) {
             this.localizationChangeSubscription.unsubscribe();
         }
@@ -2409,6 +2407,12 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
     reset() {
         this.value = NO_VALUE;
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     /**
      * @hidden
      */
@@ -2803,15 +2807,6 @@ let AutoCompleteComponent = AutoCompleteComponent_1 = class AutoCompleteComponen
             };
         }
     }
-    setMessages() {
-        this._zone.runOutsideAngular(() => {
-            clearTimeout(this.messagesTimeout);
-            this.messagesTimeout = setTimeout(() => {
-                this.noDataText = this.localization.get('noDataText');
-                this.cdr.detectChanges();
-            });
-        });
-    }
     setComponentClasses() {
         if (this.size) {
             this.renderer.addClass(this.wrapper, getSizeClass('input', this.size));
@@ -3064,7 +3059,7 @@ AutoCompleteComponent = AutoCompleteComponent_1 = __decorate([
             *ngIf="!loading && !readonly && (clearButton && text?.length)"
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
-            [attr.title]="clearTitle"
+            [attr.title]="messageFor('clearTitle')"
             role="button"
             tabindex="-1"
             (click)="clearValue($event)"
@@ -3107,7 +3102,7 @@ AutoCompleteComponent = AutoCompleteComponent_1 = __decorate([
                     }">
                 </ng-template>
                 <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ noDataText }}</div>
+                    <div>{{ messageFor('noDataText') }}</div>
                 </ng-template>
             </div>
             <!--footer template-->
@@ -3434,12 +3429,9 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
     }
     get noDataLabel() {
         if (this.data.length === 0) {
-            return this.noDataText;
+            return this.messageFor('noDataText');
         }
     }
-    get clearTitle() {
-        return this.localization.get('clearTitle');
-    }
     get appendTo() {
         const { appendTo } = this.popupSettings;
         if (!appendTo || appendTo === 'root') {
@@ -3657,7 +3649,6 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         this.createValueStream();
         this.subscribeTouchEvents();
         this.attachSelectClickHandler();
-        this.setMessages();
         this.setComponentClasses();
     }
     createValueStream() {
@@ -3764,7 +3755,7 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         this.subs.add(this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-            this.setMessages();
+            this.cdr.detectChanges();
         }));
         this.subs.add(merge(this.navigationService.up, this.navigationService.down, this.navigationService.home, this.navigationService.end)
             .pipe(filter((event) => isPresent(event.index)))
@@ -3797,7 +3788,6 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
     }
     ngOnDestroy() {
         this.destroyPopup();
-        clearTimeout(this.messagesTimeout);
         this.subs.unsubscribe();
         if (isPresent(this.valueSubscription)) {
             this.valueSubscription.unsubscribe();
@@ -3894,6 +3884,12 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         const valueEmpty = !isPresent(this.value) || isEmptyString(this.value);
         return textEmpty && valueEmpty;
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     /**
      * @hidden
      */
@@ -4376,15 +4372,6 @@ let ComboBoxComponent = ComboBoxComponent_1 = class ComboBoxComponent {
         this.filterText = '';
         this.filterChange.emit(this.filterText);
     }
-    setMessages() {
-        this.zone.runOutsideAngular(() => {
-            clearTimeout(this.messagesTimeout);
-            this.messagesTimeout = setTimeout(() => {
-                this.noDataText = this.localization.get('noDataText');
-                this.cdr.detectChanges();
-            });
-        });
-    }
     subscribeTouchEvents() {
         if (!isDocumentAvailable() || !this.touchEnabled) {
             return;
@@ -4660,6 +4647,9 @@ ComboBoxComponent = ComboBoxComponent_1 = __decorate([
 
             i18n-clearTitle="kendo.combobox.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-selectButtonText="kendo.combobox.selectButtonText|The text set as aria-label on the select button"
+            selectButtonText="Select"
         >
         </ng-container>
         <kendo-searchbar #searchbar
@@ -4685,7 +4675,7 @@ ComboBoxComponent = ComboBoxComponent_1 = __decorate([
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
             aria-hidden="true"
-            [attr.title]="clearTitle"
+            [attr.title]="messageFor('clearTitle')"
             (click)="clearValue($event)"
             [kendoEventsOutsideAngular]="{
                 mousedown: preventEventDefault
@@ -4695,11 +4685,11 @@ ComboBoxComponent = ComboBoxComponent_1 = __decorate([
         </span>
         <button
             #select
-            aria-hidden="true"
             unselectable="on"
             type="button"
             class="k-input-button k-button k-icon-button"
             [ngClass]="selectButtonClasses"
+            [attr.aria-label]="messageFor('selectButtonText')"
             [kendoEventsOutsideAngular]="{
                 mousedown: preventEventDefault
             }"
@@ -4740,7 +4730,7 @@ ComboBoxComponent = ComboBoxComponent_1 = __decorate([
                     }">
                 </ng-template>
                 <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ noDataText }}</div>
+                    <div>{{ messageFor('noDataText') }}</div>
                 </ng-template>
             </div>
             <!--footer template-->
@@ -4989,14 +4979,14 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         return this.listBoxId;
     }
     get ariaActivedescendant() {
-        if (!isPresent(this.dataItem)) {
+        if (!isPresent(this.dataItem) || !this.isOpen) {
             return;
         }
         return this.optionPrefix + "-" + getter$1(this.dataItem, this.valueField);
     }
     get noDataLabel() {
         if (this.dataService.itemsCount === 0) {
-            return this.noDataText;
+            return this.messageFor('noDataText');
         }
     }
     get appendTo() {
@@ -5310,9 +5300,8 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         this.localizationChangesSubscription = this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-            this.setMessages();
+            this.cdr.detectChanges();
         });
-        this.setMessages();
         this.assignAriaDescribedBy();
         this.setComponentClasses();
     }
@@ -5336,7 +5325,6 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
     ngOnDestroy() {
         this.destroyPopup();
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
         if (this.localizationChangesSubscription) {
             this.localizationChangesSubscription.unsubscribe();
         }
@@ -5457,6 +5445,12 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
     reset() {
         this.value = undefined;
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     /**
      * @hidden
      */
@@ -5951,15 +5945,6 @@ let DropDownListComponent = DropDownListComponent_1 = class DropDownListComponen
         const virtual = this.virtual;
         virtual.skip = event.skip;
     }
-    setMessages() {
-        this._zone.runOutsideAngular(() => {
-            clearTimeout(this.messagesTimeout);
-            this.messagesTimeout = setTimeout(() => {
-                this.noDataText = this.localization.get('noDataText');
-                this.cdr.detectChanges();
-            });
-        });
-    }
     assignAriaDescribedBy() {
         const currentValue = this.wrapper.nativeElement.getAttribute('aria-describedby') || '';
         const trimmed = currentValue.replace(this.valueLabelId, '').trim();
@@ -6261,9 +6246,12 @@ DropDownListComponent = DropDownListComponent_1 = __decorate([
         <ng-container kendoDropDownListLocalizedMessages
             i18n-noDataText="kendo.dropdownlist.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
+
+            i18n-selectButtonText="kendo.dropdownlist.selectButtonText|The text set as aria-label on the select button"
+            selectButtonText="Select"
         >
         </ng-container>
-        <span class="k-input-inner" unselectable="on" [id]="valueLabelId">
+        <span class="k-input-inner" unselectable="on" role="option" [id]="valueLabelId">
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
                     [templateContext]="{
@@ -6280,6 +6268,7 @@ DropDownListComponent = DropDownListComponent_1 = __decorate([
             type="button"
             class="k-input-button k-button k-icon-button"
             [ngClass]="selectButtonClasses"
+            [attr.aria-label]="messageFor('selectButtonText')"
             [kendoEventsOutsideAngular]="{
                 mousedown: onMouseDown
             }"
@@ -6322,7 +6311,7 @@ DropDownListComponent = DropDownListComponent_1 = __decorate([
                     class="k-list"
                     [ngClass]="optionLabelSizeClass"
                 >
-                    <div class="k-list-optionlabel k-list-item" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
+                    <div class="k-list-optionlabel" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
                         {{ getDefaultItemText() }}
                     </div>
                 </div>
@@ -6332,7 +6321,7 @@ DropDownListComponent = DropDownListComponent_1 = __decorate([
                     class="k-list"
                     [ngClass]="optionLabelSizeClass"
                 >
-                    <div class="k-list-optionlabel k-list-item" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
+                    <div class="k-list-optionlabel" [ngClass]="{ 'k-disabled': isDisabledDefaultItem }" kendoDropDownsSelectable [index]="-1">
                         <ng-template
                             [templateContext]="{
                                 templateRef: itemTemplate.templateRef,
@@ -6375,7 +6364,7 @@ DropDownListComponent = DropDownListComponent_1 = __decorate([
                     }">
                 </ng-template>
                 <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ noDataText }}</div>
+                    <div>{{ messageFor('noDataText') }}</div>
                 </ng-template>
             </div>
             <!--footer template-->
@@ -6627,7 +6616,8 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
          */
         this.clearButton = true;
         /**
-         * A user-defined callback function which receives an array of selected data items and maps them to an array of tags.
+         * A user-defined callback function which receives an array of selected data items and maps them to an array of tags
+         * ([see examples]({% slug summarytagmode_multiselect %}#toc-rendering-of-tags)).
          *
          * @param { Any[] } dataItems - The selected data items from the list.
          * @returns { Any[] } - The tags that will be rendered by the component.
@@ -6742,6 +6732,7 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
          */
         this.removeTag = new EventEmitter();
         this.hostClasses = true;
+        this.role = 'combobox';
         this.initialized = false;
         this._size = 'medium';
         this._rounded = 'medium';
@@ -7051,6 +7042,9 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
     get isLoading() {
         return this.loading;
     }
+    get isAriaExpanded() {
+        return this.isOpen;
+    }
     /**
      * @hidden
      */
@@ -7114,12 +7108,9 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
     }
     get noDataLabel() {
         if (this.dataService.itemsCount === 0) {
-            return this.noDataText;
+            return this.messageFor('noDataText');
         }
     }
-    get clearTitle() {
-        return this.localization.get('clearTitle');
-    }
     get clearButtonVisiblity() {
         if (this.touchEnabled) {
             return 'visible';
@@ -7329,9 +7320,8 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         this.localizationChangeSubscription = this.localization
             .changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-            this.setMessages();
+            this.cdr.markForCheck();
         });
-        this.setMessages();
         this.setState(this.value);
         this.setComponentClasses();
         this.initialized = true;
@@ -7355,7 +7345,6 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
     ngOnDestroy() {
         this._toggle(false);
         this.unsubscribeEvents();
-        clearTimeout(this.messagesTimeout);
     }
     /**
      * Toggles the visibility of the popup
@@ -7388,6 +7377,12 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
         this.text = "";
         this.value = [];
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     // NG MODEL BINDINGS
     /**
      * @hidden
@@ -7816,15 +7811,6 @@ let MultiSelectComponent = MultiSelectComponent_1 = class MultiSelectComponent {
             setTimeout(() => this._zone.run(f));
         });
     }
-    setMessages() {
-        this._zone.runOutsideAngular(() => {
-            clearTimeout(this.messagesTimeout);
-            this.messagesTimeout = setTimeout(() => {
-                this.noDataText = this.localization.get('noDataText');
-                this.cdr.detectChanges();
-            });
-        });
-    }
     setComponentClasses() {
         if (this.size) {
             this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('input', this.size));
@@ -8061,6 +8047,15 @@ __decorate([
     __metadata("design:type", Boolean),
     __metadata("design:paramtypes", [])
 ], MultiSelectComponent.prototype, "isLoading", null);
+__decorate([
+    HostBinding('attr.role'),
+    __metadata("design:type", String)
+], MultiSelectComponent.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.aria-expanded'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], MultiSelectComponent.prototype, "isAriaExpanded", null);
 __decorate([
     HostListener('mousedown', ['$event']),
     __metadata("design:type", Function),
@@ -8094,7 +8089,7 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
             i18n-noDataText="kendo.multiselect.noDataText|The text displayed in the popup when there are no items"
             noDataText="NO DATA FOUND"
 
-            i18n-clearTitle="kendo.combobox.clearTitle|The title of the clear button"
+            i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
             clearTitle="clear"
         >
         </ng-container>
@@ -8117,7 +8112,7 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
             <kendo-searchbar
                 #searchbar
                 [id]="focusableId"
-                [role]="'listbox'"
+                [role]="'textbox'"
                 [tagListId]="tagListId"
                 [activeDescendant]="activeDescendant"
                 [noDataLabel]="noDataLabel"
@@ -8139,7 +8134,7 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
             *ngIf="!loading && !readonly && clearButton && (tags?.length || text?.length)"
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
-            [attr.title]="clearTitle"
+            [attr.title]="messageFor('clearTitle')"
             role="button"
             tabindex="-1"
             (mousedown)="clearAll($event)"
@@ -8204,7 +8199,7 @@ MultiSelectComponent = MultiSelectComponent_1 = __decorate([
                     }">
                 </ng-template>
                 <ng-template [ngIf]="!noDataTemplate">
-                    <div>{{ noDataText }}</div>
+                    <div>{{ messageFor('noDataText') }}</div>
                 </ng-template>
             </div>
             <!--footer template-->
@@ -8602,7 +8597,7 @@ MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = __decorate([
             class="k-clear-value"
             [style.visibility]="clearButtonVisiblity"
             aria-hidden="true"
-            [attr.title]="clearTitle"
+            [attr.title]="messageFor('clearTitle')"
             (click)="clearValue($event)"
             [kendoEventsOutsideAngular]="{
                 mousedown: preventEventDefault
@@ -8619,6 +8614,7 @@ MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = __decorate([
             type="button"
             class="k-input-button k-button k-icon-button"
             [ngClass]="selectButtonClasses"
+            [attr.aria-label]="messageFor('selectButtonText')"
             [kendoEventsOutsideAngular]="{
                 mousedown: preventEventDefault
             }"
@@ -8743,7 +8739,7 @@ MultiColumnComboBoxComponent = MultiColumnComboBoxComponent_1 = __decorate([
                     >
                     </ng-template>
                     <ng-template [ngIf]="!noDataTemplate">
-                        <div>{{ noDataText }}</div>
+                        <div>{{ messageFor('noDataText') }}</div>
                     </ng-template>
                 </div>
 
@@ -10032,11 +10028,15 @@ DropDownTreeComponent = DropDownTreeComponent_1 = __decorate([
 
             i18n-clearTitle="kendo.dropdowntree.clearTitle|The title of the clear button"
             clearTitle="clear"
+
+            i18n-selectButtonText="kendo.dropdowntree.selectButtonText|The text set as aria-label on the select button"
+            selectButtonText="Select"
         >
         </ng-container>
         <span
             [attr.id]="valueLabelId"
             class="k-input-inner"
+            role="option"
         >
             <span class="k-input-value-text">
                 <ng-template *ngIf="valueTemplate"
@@ -10064,6 +10064,7 @@ DropDownTreeComponent = DropDownTreeComponent_1 = __decorate([
             aria-hidden="true"
             class="k-input-button k-button k-icon-button"
             [ngClass]="selectButtonClasses"
+            [attr.aria-label]="messageFor('selectButtonText')"
         >
             <span
                 class="k-button-icon k-icon"
@@ -10191,7 +10192,7 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
         this.cdr = cdr;
         this.touchEnabled = touchEnabled$$1;
         this.hostClasses = true;
-        this.role = 'listbox';
+        this.role = 'combobox';
         this.ariaHasPopup = 'tree';
         /**
          * Sets the levels in the data set where the values can be found when `valueField` is an Array.
@@ -10378,6 +10379,9 @@ let MultiSelectTreeComponent = MultiSelectTreeComponent_1 = class MultiSelectTre
     get hostTabIndex() {
         return this.tabindex;
     }
+    get isAriaExpanded() {
+        return this.isOpen;
+    }
     get isReadonly() {
         return this.readonly;
     }
@@ -11345,6 +11349,11 @@ __decorate([
     HostBinding('attr.role'),
     __metadata("design:type", String)
 ], MultiSelectTreeComponent.prototype, "role", void 0);
+__decorate([
+    HostBinding('attr.aria-expanded'),
+    __metadata("design:type", Boolean),
+    __metadata("design:paramtypes", [])
+], MultiSelectTreeComponent.prototype, "isAriaExpanded", null);
 __decorate([
     HostBinding('attr.aria-haspopup'),
     __metadata("design:type", String)
@@ -12082,11 +12091,8 @@ TagListComponent = __decorate([
         template: `
         <div
             *ngFor="let tag of tags; let index = index;"
-            role="option"
             [attr.id]="itemId(tag, index)"
             [attr.aria-hidden]="tagAriaHidden(index)"
-            aria-selected="true"
-            [attr.aria-setsize]="tags?.length"
             class="k-chip"
             [ngClass]="{
                 'k-focus': index === focused,
@@ -12160,6 +12166,10 @@ __decorate([
     Input(),
     __metadata("design:type", String)
 ], Messages.prototype, "checkAllText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], Messages.prototype, "selectButtonText", void 0);
 
 var LocalizedMessagesDirective_1;
 /**
@@ -12528,7 +12538,7 @@ class BaseCheckDirective {
         const level = getHierarchicalItemLevel(item.index);
         const candidate = Object.assign({}, item, { level });
         this.checkedItems.push(candidate);
-        this.checkedKeys.add(valueFrom(candidate, this.valueField));
+        this.checkedKeys.add(this.getKey(candidate));
     }
     removeItem(item) {
         if (!this.isItemChecked(item)) {
@@ -12538,14 +12548,28 @@ class BaseCheckDirective {
         const candidate = Object.assign({}, item, { level });
         this.checkedItems = this.checkedItems
             .filter(item => valueFrom(item, this.valueField) !== valueFrom(candidate, this.valueField));
-        this.checkedKeys.delete(valueFrom(candidate, this.valueField));
+        this.checkedKeys.delete(this.getKey(candidate));
     }
     isItemChecked(item) {
-        return this.checkedKeys.has(valueFrom(item, this.valueField));
+        const level = item.index.split('_').length - 1;
+        item.level = level;
+        return this.checkedKeys.has(this.getKey(item));
     }
     updateItems() {
         this.checkedItems = this.checkedItems || [];
-        this.checkedKeys = new Set(this.checkedItems.map(item => valueFrom(item, this.valueField)));
+        this.checkedKeys = new Set(this.checkedItems.map(item => this.getKey(item)));
+    }
+    /**
+     * Adds the item's depth to the item's value to allow duplicate values on different levels.
+     *
+     * @param item - The checked key.
+     * @returns { string } - A string key consisting of the item's `valueField` value and its depth.
+     */
+    getKey(item) {
+        if (isArray(this.valueField)) {
+            return valueFrom(item, this.valueField) + '_' + item.level;
+        }
+        return valueFrom(item, this.valueField);
     }
 }
 __decorate([