@progress/kendo-angular-dropdowns 25.0.0-develop.1 → 25.0.0-develop.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,7 +3,7 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
- import { EventEmitter, Output, HostBinding, Input, Component, Directive, Injectable, HostListener, ViewChild, ViewChildren, forwardRef, isDevMode, ViewContainerRef, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
6
+ import { EventEmitter, Output, HostBinding, Input, Component, Directive, Injectable, HostListener, afterNextRender, ViewChild, ViewChildren, forwardRef, isDevMode, ViewContainerRef, ContentChild, ContentChildren, signal, ChangeDetectionStrategy, NgModule } from '@angular/core';
7
7
  import * as i10 from '@progress/kendo-angular-common';
8
8
  import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, normalizeKeys, Keys, setHTMLAttributes, replaceMessagePlaceholder, isChanged, TemplateContextDirective, ResizeSensorComponent, closest as closest$1, hasFocusableParent, parseCSSClassNames, isControlRequired, guid, hasObservers, SeparatorComponent, SuffixTemplateDirective, PrefixTemplateDirective, KendoInput, KENDO_WEBMCP_HOST, MultiTabStop, anyChanged, EventsOutsideAngularDirective, scrollbarWidth, ToggleButtonTabStopDirective, ResizeBatchService, KENDO_ADORNMENTS, KENDO_TOGGLEBUTTONTABSTOP } from '@progress/kendo-angular-common';
9
9
  export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
@@ -20,10 +20,10 @@ import { map, switchMap, take, auditTime, tap, filter, partition, throttleTime,
20
20
  import * as i2 from '@progress/kendo-angular-popup';
21
21
  import { PopupService } from '@progress/kendo-angular-popup';
22
22
  import { NgStyle, NgClass, NgTemplateOutlet } from '@angular/common';
23
- import { checkIcon, xIcon, chevronDownIcon, searchIcon, xCircleIcon } from '@progress/kendo-svg-icons';
24
- import { IconComponent, IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
23
+ import { CheckBoxComponent, TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
24
+ import { checkIcon, searchIcon, xIcon, chevronDownIcon, xCircleIcon } from '@progress/kendo-svg-icons';
25
+ import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
25
26
  import { ActionSheetComponent, ActionSheetTemplateDirective } from '@progress/kendo-angular-navigation';
26
- import { TextBoxComponent, TextBoxPrefixTemplateDirective } from '@progress/kendo-angular-inputs';
27
27
  import { ButtonComponent } from '@progress/kendo-angular-buttons';
28
28
  import * as i1$1 from '@progress/kendo-angular-treeview';
29
29
  import { TreeViewComponent, SelectDirective, DataBoundComponent, ExpandableComponent, FlatDataBindingDirective, HierarchyBindingDirective, ExpandDirective } from '@progress/kendo-angular-treeview';
@@ -37,8 +37,8 @@ const packageMetadata = {
37
37
  productName: 'Kendo UI for Angular',
38
38
  productCode: 'KENDOUIANGULAR',
39
39
  productCodes: ['KENDOUIANGULAR'],
40
- publishDate: 1783679907,
41
- version: '25.0.0-develop.1',
40
+ publishDate: 1785426798,
41
+ version: '25.0.0-develop.13',
42
42
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
43
43
  };
44
44
 
@@ -211,6 +211,17 @@ const hasProps = (obj, props) => {
211
211
  }
212
212
  return props.every(prop => obj.hasOwnProperty(prop));
213
213
  };
214
+ /**
215
+ * @hidden
216
+ *
217
+ * Checks whether an array contains grouped data.
218
+ * GroupResult { aggregates: AggregateResult, field: string, items: object[], value: any }
219
+ * https://www.telerik.com/kendo-angular-ui/components/dataquery/api/GroupResult/
220
+ */
221
+ const isGroupedData = (data) => {
222
+ return isPresent(data) && data.length > 0 && isPresent(data[0])
223
+ && hasProps(data[0], ['aggregates', 'field', 'items', 'value']);
224
+ };
214
225
  /**
215
226
  * @hidden
216
227
  *
@@ -466,12 +477,12 @@ class SearchBarComponent {
466
477
  get isSuggestable() {
467
478
  return this._isSuggestable;
468
479
  }
469
- set isFilterable(isFilterable) {
470
- this._isFilterable = isFilterable;
480
+ set hasListAutocomplete(hasListAutocomplete) {
481
+ this._hasListAutocomplete = hasListAutocomplete;
471
482
  this.setAriaAutocomplete();
472
483
  }
473
- get isFilterable() {
474
- return this._isFilterable;
484
+ get hasListAutocomplete() {
485
+ return this._hasListAutocomplete;
475
486
  }
476
487
  get userInput() {
477
488
  return this._userInput;
@@ -510,7 +521,7 @@ class SearchBarComponent {
510
521
  ariaControls;
511
522
  ariaExpanded = null;
512
523
  get attrAriaInvalid() {
513
- return this.formControl?.invalid ? true : null;
524
+ return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
514
525
  }
515
526
  set placeholder(text) {
516
527
  this._placeholder = text || '';
@@ -538,7 +549,7 @@ class SearchBarComponent {
538
549
  _previousValue = "";
539
550
  _placeholder = "";
540
551
  _isSuggestable = false;
541
- _isFilterable = false;
552
+ _hasListAutocomplete = false;
542
553
  renderer;
543
554
  subs = new Subscription();
544
555
  _inputAttributes;
@@ -558,7 +569,7 @@ class SearchBarComponent {
558
569
  'aria-controls': this.ariaControls,
559
570
  'aria-activedescendant': this.activeDescendant,
560
571
  'aria-busy': this.isLoading,
561
- 'aria-invalid': this.formControl?.invalid
572
+ 'aria-invalid': this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)
562
573
  };
563
574
  }
564
575
  get mutableAttributes() {
@@ -643,16 +654,16 @@ class SearchBarComponent {
643
654
  }
644
655
  }
645
656
  setAriaAutocomplete() {
646
- if (this.isFilterable) {
657
+ if (this.hasListAutocomplete) {
647
658
  this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'list');
648
659
  }
649
660
  if (this.isSuggestable) {
650
661
  this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'inline');
651
662
  }
652
- if (this.isFilterable && this.isSuggestable) {
663
+ if (this.hasListAutocomplete && this.isSuggestable) {
653
664
  this.renderer.setAttribute(this.input.nativeElement, 'aria-autocomplete', 'both');
654
665
  }
655
- if (!this.isFilterable && !this.isSuggestable) {
666
+ if (!this.hasListAutocomplete && !this.isSuggestable) {
656
667
  this.renderer.removeAttribute(this.input.nativeElement, 'aria-autocomplete');
657
668
  }
658
669
  }
@@ -702,12 +713,12 @@ class SearchBarComponent {
702
713
  }
703
714
  setInputAttributes() {
704
715
  const attributesToRender = Object.assign({}, this.mutableAttributes, this.parsedAttributes);
705
- setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.ngZone);
716
+ setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement, this.injector);
706
717
  }
707
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
708
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: SearchBarComponent, isStandalone: true, selector: "input[kendoSearchbar]", inputs: { tagListId: "tagListId", readonly: "readonly", disabled: "disabled", isRequired: "isRequired", isSuggestable: "isSuggestable", isFilterable: "isFilterable", userInput: "userInput", suggestedText: "suggestedText", inputAttributes: "inputAttributes", id: "id", activeDescendant: "activeDescendant", tabIndex: "tabIndex", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "attr.id": "this.id", "attr.aria-activedescendant": "this.activeDescendant", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.isLoading", "attr.aria-controls": "this.ariaControls", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-invalid": "this.attrAriaInvalid", "attr.placeholder": "this.placeholder", "attr.role": "this.role", "attr.dir": "this.dir" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
718
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
719
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: SearchBarComponent, isStandalone: true, selector: "input[kendoSearchbar]", inputs: { tagListId: "tagListId", readonly: "readonly", disabled: "disabled", isRequired: "isRequired", isSuggestable: "isSuggestable", hasListAutocomplete: "hasListAutocomplete", userInput: "userInput", suggestedText: "suggestedText", inputAttributes: "inputAttributes", id: "id", activeDescendant: "activeDescendant", tabIndex: "tabIndex", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "attr.id": "this.id", "attr.aria-activedescendant": "this.activeDescendant", "attr.tabindex": "this.tabIndex", "attr.aria-busy": "this.isLoading", "attr.aria-controls": "this.ariaControls", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-invalid": "this.attrAriaInvalid", "attr.placeholder": "this.placeholder", "attr.role": "this.role", "attr.dir": "this.dir" } }, usesOnChanges: true, ngImport: i0, template: ``, isInline: true });
709
720
  }
710
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SearchBarComponent, decorators: [{
721
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SearchBarComponent, decorators: [{
711
722
  type: Component,
712
723
  args: [{
713
724
  selector: 'input[kendoSearchbar]',
@@ -724,7 +735,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
724
735
  type: Input
725
736
  }], isSuggestable: [{
726
737
  type: Input
727
- }], isFilterable: [{
738
+ }], hasListAutocomplete: [{
728
739
  type: Input
729
740
  }], userInput: [{
730
741
  type: Input
@@ -820,10 +831,10 @@ class ItemTemplateDirective {
820
831
  constructor(templateRef) {
821
832
  this.templateRef = templateRef;
822
833
  }
823
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
824
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]", ngImport: i0 });
834
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
835
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]", ngImport: i0 });
825
836
  }
826
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ItemTemplateDirective, decorators: [{
837
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ItemTemplateDirective, decorators: [{
827
838
  type: Directive,
828
839
  args: [{
829
840
  selector: '[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]',
@@ -864,10 +875,10 @@ class HeaderTemplateDirective {
864
875
  constructor(templateRef) {
865
876
  this.templateRef = templateRef;
866
877
  }
867
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
868
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]", ngImport: i0 });
878
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
879
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]", ngImport: i0 });
869
880
  }
870
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
881
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
871
882
  type: Directive,
872
883
  args: [{
873
884
  selector: '[kendoDropDownListHeaderTemplate],[kendoComboBoxHeaderTemplate],[kendoDropDownTreeHeaderTemplate],[kendoMultiColumnComboBoxHeaderTemplate],[kendoAutoCompleteHeaderTemplate],[kendoMultiSelectHeaderTemplate],[kendoMultiSelectTreeHeaderTemplate]',
@@ -908,10 +919,10 @@ class FooterTemplateDirective {
908
919
  constructor(templateRef) {
909
920
  this.templateRef = templateRef;
910
921
  }
911
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
912
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]", ngImport: i0 });
922
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
923
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]", ngImport: i0 });
913
924
  }
914
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FooterTemplateDirective, decorators: [{
925
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FooterTemplateDirective, decorators: [{
915
926
  type: Directive,
916
927
  args: [{
917
928
  selector: '[kendoDropDownListFooterTemplate],[kendoComboBoxFooterTemplate],[kendoDropDownTreeFooterTemplate],[kendoMultiColumnComboBoxFooterTemplate],[kendoAutoCompleteFooterTemplate],[kendoMultiSelectFooterTemplate],[kendoMultiSelectTreeFooterTemplate]',
@@ -958,10 +969,10 @@ class GroupTemplateDirective {
958
969
  constructor(templateRef) {
959
970
  this.templateRef = templateRef;
960
971
  }
961
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
962
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: GroupTemplateDirective, isStandalone: true, selector: "[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]", ngImport: i0 });
972
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: GroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
973
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: GroupTemplateDirective, isStandalone: true, selector: "[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]", ngImport: i0 });
963
974
  }
964
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GroupTemplateDirective, decorators: [{
975
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: GroupTemplateDirective, decorators: [{
965
976
  type: Directive,
966
977
  args: [{
967
978
  selector: '[kendoDropDownListGroupTemplate],[kendoComboBoxGroupTemplate],[kendoMultiColumnComboBoxGroupTemplate],[kendoAutoCompleteGroupTemplate],[kendoMultiSelectGroupTemplate]',
@@ -1008,10 +1019,10 @@ class FixedGroupTemplateDirective {
1008
1019
  constructor(templateRef) {
1009
1020
  this.templateRef = templateRef;
1010
1021
  }
1011
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FixedGroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1012
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FixedGroupTemplateDirective, isStandalone: true, selector: "[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]", ngImport: i0 });
1022
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FixedGroupTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1023
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: FixedGroupTemplateDirective, isStandalone: true, selector: "[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]", ngImport: i0 });
1013
1024
  }
1014
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FixedGroupTemplateDirective, decorators: [{
1025
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FixedGroupTemplateDirective, decorators: [{
1015
1026
  type: Directive,
1016
1027
  args: [{
1017
1028
  selector: '[kendoDropDownListFixedGroupTemplate],[kendoComboBoxFixedGroupTemplate],[kendoMultiColumnComboBoxFixedGroupTemplate],[kendoAutoCompleteFixedGroupTemplate],[kendoMultiSelectFixedGroupTemplate]',
@@ -1058,9 +1069,7 @@ class DataService {
1058
1069
  * Used to determine if the component received grouped data.
1059
1070
  */
1060
1071
  isGrouped(data) {
1061
- // GroupResult { aggregates: AggregateResult, field: string, items: object[], value: any }
1062
- // https://www.telerik.com/kendo-angular-ui/components/dataquery/api/GroupResult/
1063
- return (isPresent(data) && data.length !== 0) && isPresent(data[0]) && hasProps(data[0], ['aggregates', 'field', 'items', 'value']);
1072
+ return isGroupedData(data);
1064
1073
  }
1065
1074
  /**
1066
1075
  * @hidden
@@ -1256,10 +1265,10 @@ class DataService {
1256
1265
  }
1257
1266
  return flat;
1258
1267
  }
1259
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1260
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataService });
1268
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1269
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DataService });
1261
1270
  }
1262
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DataService, decorators: [{
1271
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DataService, decorators: [{
1263
1272
  type: Injectable
1264
1273
  }] });
1265
1274
 
@@ -1295,10 +1304,10 @@ class DisabledItemsService {
1295
1304
  }
1296
1305
  }
1297
1306
  }
1298
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DisabledItemsService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable });
1299
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DisabledItemsService });
1307
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DisabledItemsService, deps: [{ token: DataService }], target: i0.ɵɵFactoryTarget.Injectable });
1308
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DisabledItemsService });
1300
1309
  }
1301
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DisabledItemsService, decorators: [{
1310
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DisabledItemsService, decorators: [{
1302
1311
  type: Injectable
1303
1312
  }], ctorParameters: () => [{ type: DataService }] });
1304
1313
 
@@ -1453,10 +1462,10 @@ class SelectionService {
1453
1462
  }
1454
1463
  this.unselectMultiple(indicesToBeUnselected);
1455
1464
  }
1456
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectionService, deps: [{ token: DisabledItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
1457
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectionService });
1465
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SelectionService, deps: [{ token: DisabledItemsService }], target: i0.ɵɵFactoryTarget.Injectable });
1466
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SelectionService });
1458
1467
  }
1459
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectionService, decorators: [{
1468
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SelectionService, decorators: [{
1460
1469
  type: Injectable
1461
1470
  }], ctorParameters: () => [{ type: DisabledItemsService }] });
1462
1471
 
@@ -1657,10 +1666,10 @@ class NavigationService {
1657
1666
  return this.disabledItemsService.isIndexDisabled(index);
1658
1667
  }
1659
1668
  }
1660
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NavigationService, deps: [{ token: DisabledItemsService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Injectable });
1661
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NavigationService });
1669
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NavigationService, deps: [{ token: DisabledItemsService }, { token: SelectionService }], target: i0.ɵɵFactoryTarget.Injectable });
1670
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NavigationService });
1662
1671
  }
1663
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NavigationService, decorators: [{
1672
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NavigationService, decorators: [{
1664
1673
  type: Injectable
1665
1674
  }], ctorParameters: () => [{ type: DisabledItemsService }, { type: SelectionService }] });
1666
1675
 
@@ -1697,10 +1706,10 @@ class NoDataTemplateDirective {
1697
1706
  constructor(templateRef) {
1698
1707
  this.templateRef = templateRef;
1699
1708
  }
1700
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NoDataTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1701
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: NoDataTemplateDirective, isStandalone: true, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]", ngImport: i0 });
1709
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NoDataTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1710
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: NoDataTemplateDirective, isStandalone: true, selector: "[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]", ngImport: i0 });
1702
1711
  }
1703
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NoDataTemplateDirective, decorators: [{
1712
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NoDataTemplateDirective, decorators: [{
1704
1713
  type: Directive,
1705
1714
  args: [{
1706
1715
  selector: '[kendoDropDownListNoDataTemplate],[kendoDropDownTreeNoDataTemplate],[kendoComboBoxNoDataTemplate],[kendoMultiColumnComboBoxNoDataTemplate],[kendoAutoCompleteNoDataTemplate],[kendoMultiSelectNoDataTemplate],[kendoMultiSelectTreeNoDataTemplate]',
@@ -1769,10 +1778,10 @@ class ListItemDirective {
1769
1778
  constructor(element) {
1770
1779
  this.element = element;
1771
1780
  }
1772
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1773
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group], li[role=presentation]\"", ngImport: i0 });
1781
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
1782
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group], li[role=presentation]\"", ngImport: i0 });
1774
1783
  }
1775
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListItemDirective, decorators: [{
1784
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListItemDirective, decorators: [{
1776
1785
  type: Directive,
1777
1786
  args: [{
1778
1787
  selector: '"li[role=option], li[role=group], li[role=presentation]"',
@@ -1805,6 +1814,9 @@ class SelectableDirective {
1805
1814
  if (this.checkboxes.enabled && !this.checkboxes.checkOnClick) {
1806
1815
  return;
1807
1816
  }
1817
+ if (this.index === -2) {
1818
+ return;
1819
+ }
1808
1820
  if (this.multipleSelection) {
1809
1821
  if (this.selectionService.isSelected(this.index)) {
1810
1822
  this.selectionService.deselect(this.index);
@@ -1817,10 +1829,10 @@ class SelectableDirective {
1817
1829
  this.selectionService.change(this.index);
1818
1830
  }
1819
1831
  }
1820
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectableDirective, deps: [{ token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
1821
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SelectableDirective, isStandalone: true, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", isMultiselect: "isMultiselect", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
1832
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SelectableDirective, deps: [{ token: SelectionService }], target: i0.ɵɵFactoryTarget.Directive });
1833
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: SelectableDirective, isStandalone: true, selector: "[kendoDropDownsSelectable]", inputs: { index: "index", checkboxes: "checkboxes", height: "height", isMultiselect: "isMultiselect", multipleSelection: "multipleSelection" }, host: { listeners: { "click": "onClick($event)" }, properties: { "attr.index": "this.index", "style.height.px": "this.height", "style.minHeight.px": "this.height", "class.k-focus": "this.focusedClassName", "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
1822
1834
  }
1823
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SelectableDirective, decorators: [{
1835
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SelectableDirective, decorators: [{
1824
1836
  type: Directive,
1825
1837
  args: [{
1826
1838
  selector: '[kendoDropDownsSelectable]',
@@ -1888,10 +1900,10 @@ class CustomItemTemplateDirective {
1888
1900
  constructor(templateRef) {
1889
1901
  this.templateRef = templateRef;
1890
1902
  }
1891
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1892
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: CustomItemTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectCustomItemTemplate]", ngImport: i0 });
1903
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CustomItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
1904
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: CustomItemTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectCustomItemTemplate]", ngImport: i0 });
1893
1905
  }
1894
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomItemTemplateDirective, decorators: [{
1906
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CustomItemTemplateDirective, decorators: [{
1895
1907
  type: Directive,
1896
1908
  args: [{
1897
1909
  selector: '[kendoMultiSelectCustomItemTemplate]',
@@ -1911,6 +1923,7 @@ class ListComponent {
1911
1923
  zone;
1912
1924
  renderer;
1913
1925
  localization;
1926
+ injector;
1914
1927
  selected = [];
1915
1928
  focused = -1;
1916
1929
  textField;
@@ -1927,14 +1940,21 @@ class ListComponent {
1927
1940
  type = 'list';
1928
1941
  checkboxes = { enabled: false };
1929
1942
  ariaLive;
1943
+ ariaLabel;
1930
1944
  isMultiselect;
1931
1945
  isActionSheetExpanded;
1932
1946
  showStickyHeader;
1933
1947
  rowWidth;
1948
+ columnsWidths;
1934
1949
  customItemTemplate;
1935
1950
  text;
1936
1951
  allowCustom;
1937
1952
  defaultItem;
1953
+ selectAll = false;
1954
+ selectAllText;
1955
+ isAllSelected = false;
1956
+ isPartiallySelected = false;
1957
+ selectAllClick = new EventEmitter();
1938
1958
  set data(data) {
1939
1959
  this._data = data[0]?.header ? data.slice(0) : data;
1940
1960
  if (this.dataService.grouped) {
@@ -1955,12 +1975,12 @@ class ListComponent {
1955
1975
  }
1956
1976
  set size(size) {
1957
1977
  if (this.type === 'list') {
1958
- this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
1978
+ this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this._size));
1959
1979
  if (size) {
1960
1980
  this.renderer.addClass(this.wrapper.nativeElement, getSizeClass('list', size));
1961
1981
  }
1962
- this._size = size;
1963
1982
  }
1983
+ this._size = size;
1964
1984
  }
1965
1985
  get size() {
1966
1986
  return this._size;
@@ -1992,6 +2012,7 @@ class ListComponent {
1992
2012
  scrollSubscription;
1993
2013
  selectSubscription;
1994
2014
  _size;
2015
+ selectAllCheckboxState = false;
1995
2016
  get pageSize() {
1996
2017
  if (this.virtual.pageSize) {
1997
2018
  return this.virtual.pageSize;
@@ -2021,8 +2042,14 @@ class ListComponent {
2021
2042
  get checkboxClasses() {
2022
2043
  return `${this.size ? getSizeClass('checkbox', this.size) : ''} ${this.rounded ? getRoundedClass(this.rounded) : ''}`;
2023
2044
  }
2045
+ /**
2046
+ * @hidden
2047
+ */
2048
+ isSelectAllFocused() {
2049
+ return this.selectionService.isFocused(-2);
2050
+ }
2024
2051
  /* tslint:disable:member-ordering */
2025
- constructor(dataService, wrapper, selectionService, disabledItemsService, cdr, zone, renderer, localization) {
2052
+ constructor(dataService, wrapper, selectionService, disabledItemsService, cdr, zone, renderer, localization, injector) {
2026
2053
  this.dataService = dataService;
2027
2054
  this.wrapper = wrapper;
2028
2055
  this.selectionService = selectionService;
@@ -2031,12 +2058,14 @@ class ListComponent {
2031
2058
  this.zone = zone;
2032
2059
  this.renderer = renderer;
2033
2060
  this.localization = localization;
2061
+ this.injector = injector;
2034
2062
  this.selectSubscription = merge(this.selectionService.onSelect.pipe(map((args) => args.indices[0])), this.selectionService.onFocus)
2035
2063
  .pipe(
2036
2064
  // handle only the very last onSelect/onFocus emission
2037
2065
  switchMap(event => this.zone.onStable.pipe(take(1), map(() => event))))
2038
2066
  .subscribe(this.scrollToItem.bind(this));
2039
2067
  this.prepareClasses();
2068
+ this.initSelectAllCheckboxState();
2040
2069
  }
2041
2070
  ngOnChanges(changes) {
2042
2071
  if (isChanged('data', changes, false)) {
@@ -2052,6 +2081,9 @@ class ListComponent {
2052
2081
  if (isChanged('type', changes, false)) {
2053
2082
  this.prepareClasses();
2054
2083
  }
2084
+ if (isChanged('isAllSelected', changes, false) || isChanged('isPartiallySelected', changes, false)) {
2085
+ this.updateSelectAllCheckboxState();
2086
+ }
2055
2087
  }
2056
2088
  ngAfterViewInit() {
2057
2089
  this.setComponentClasses();
@@ -2081,8 +2113,8 @@ class ListComponent {
2081
2113
  this.scrollSubscription.unsubscribe();
2082
2114
  }
2083
2115
  }
2084
- onCheckedChange(e, index) {
2085
- const isChecked = e.target['checked'];
2116
+ onCheckboxStateChange(state, index) {
2117
+ const isChecked = state === true;
2086
2118
  if (isChecked && !this.selectionService.isSelected(index)) {
2087
2119
  this.selectionService.add(index);
2088
2120
  }
@@ -2090,6 +2122,13 @@ class ListComponent {
2090
2122
  this.selectionService.deselect(index);
2091
2123
  }
2092
2124
  }
2125
+ handleSelectAllClick() {
2126
+ const newState = !this.isAllSelected;
2127
+ this.selectAllClick.emit(newState);
2128
+ }
2129
+ handleSelectAllStateChange(state) {
2130
+ this.selectAllClick.emit(state);
2131
+ }
2093
2132
  prepareClasses() {
2094
2133
  if (this.type === 'list') {
2095
2134
  this.listContentClass = 'k-list-content';
@@ -2273,6 +2312,10 @@ class ListComponent {
2273
2312
  isItemSelected(index) {
2274
2313
  return this.selectionService.isSelected(index) || null;
2275
2314
  }
2315
+ itemAriaSelected(index) {
2316
+ const selected = this.isItemSelected(index);
2317
+ return this.type === 'list' ? (selected ?? false) : selected;
2318
+ }
2276
2319
  get isDisabledDefaultItem() {
2277
2320
  return this.disabledItemsService.isItemDisabled(this.defaultItem);
2278
2321
  }
@@ -2284,8 +2327,10 @@ class ListComponent {
2284
2327
  */
2285
2328
  setOverflow() {
2286
2329
  if (this.virtual) {
2287
- const overflow = this.hasVirtualScrollbar() ? 'scroll' : 'hidden';
2288
- this.renderer.setStyle(this.content.nativeElement, 'overflow-y', overflow);
2330
+ afterNextRender(() => {
2331
+ const overflow = this.hasVirtualScrollbar() ? 'scroll' : 'hidden';
2332
+ this.renderer.setStyle(this.content.nativeElement, 'overflow-y', overflow);
2333
+ }, { injector: this.injector });
2289
2334
  }
2290
2335
  }
2291
2336
  /**
@@ -2299,7 +2344,7 @@ class ListComponent {
2299
2344
  positionItems() {
2300
2345
  this.items.forEach((item, index) => {
2301
2346
  const offsetY = (index + this.startFrom) * this.virtual.itemHeight;
2302
- this.renderer.setStyle(item.element.nativeElement, "transform", `translateY(${offsetY}px`);
2347
+ this.renderer.setStyle(item.element.nativeElement, "transform", `translateY(${offsetY}px)`);
2303
2348
  });
2304
2349
  }
2305
2350
  setComponentClasses() {
@@ -2311,13 +2356,57 @@ class ListComponent {
2311
2356
  }
2312
2357
  if (this.type === 'dropdowngrid') {
2313
2358
  this.renderer.setStyle(this.wrapper.nativeElement, 'overflow-y', 'scroll');
2359
+ if (this.size) {
2360
+ this.renderer.removeClass(this.wrapper.nativeElement, getSizeClass('list', this.size));
2361
+ }
2314
2362
  }
2315
2363
  if (isPresent(this.virtual)) {
2316
2364
  this.renderer.addClass(this.wrapper.nativeElement, this.listVirtualClass);
2317
2365
  }
2318
2366
  }
2319
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", 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 });
2320
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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: `
2367
+ updateSelectAllCheckboxState() {
2368
+ if (this.isAllSelected) {
2369
+ this.selectAllCheckboxState = true;
2370
+ }
2371
+ else if (this.isPartiallySelected) {
2372
+ this.selectAllCheckboxState = 'indeterminate';
2373
+ }
2374
+ else {
2375
+ this.selectAllCheckboxState = false;
2376
+ }
2377
+ }
2378
+ initSelectAllCheckboxState() {
2379
+ this.updateSelectAllCheckboxState();
2380
+ }
2381
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", 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 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
2382
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", 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", ariaLabel: "ariaLabel", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", columnsWidths: "columnsWidths", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", selectAll: "selectAll", selectAllText: "selectAllText", isAllSelected: "isAllSelected", isPartiallySelected: "isPartiallySelected", data: "data", size: "size", rounded: "rounded" }, outputs: { selectAllClick: "selectAllClick", 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: `
2383
+ @if (selectAll) {
2384
+ <div class="k-list-sticky-header">
2385
+ <div
2386
+ class="k-list-sticky-header-item"
2387
+ [class.k-selected]="!checkboxes.enabled && isAllSelected"
2388
+ [class.k-focus]="isSelectAllFocused()"
2389
+ kendoDropDownsSelectable
2390
+ [checkboxes]="checkboxes"
2391
+ [index]="-2"
2392
+ tabindex="0"
2393
+ [attr.aria-selected]="isAllSelected"
2394
+ [attr.aria-label]="selectAllText"
2395
+ (click)="handleSelectAllClick()">
2396
+ @if (checkboxes.enabled) {
2397
+ <kendo-checkbox
2398
+ [checkedState]="selectAllCheckboxState"
2399
+ [ngClass]="checkboxClasses"
2400
+ [inputAttributes]="{ 'aria-label': selectAllText }"
2401
+ (click)="$event.stopPropagation()"
2402
+ (checkedStateChange)="handleSelectAllStateChange($event)"
2403
+ >
2404
+ </kendo-checkbox>
2405
+ }
2406
+ <span class="k-list-item-text">{{ selectAllText }}</span>
2407
+ </div>
2408
+ </div>
2409
+ }
2321
2410
  @if (defaultItem && !template) {
2322
2411
  <div
2323
2412
  class="k-list-optionlabel"
@@ -2387,11 +2476,12 @@ class ListComponent {
2387
2476
  [style.maxHeight.px]="height"
2388
2477
  unselectable="on"
2389
2478
  (scroll)="popupListScroll.emit($event)"
2390
- [attr.role]="dataService.grouped ? 'listbox' : null"
2391
- [attr.id]="dataService.grouped ? id : null"
2392
- [attr.aria-live]="dataService.grouped ? ariaLive : null"
2393
- [attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
2394
- [attr.aria-hidden]="dataService.grouped ? !show : null"
2479
+ [attr.role]="(dataService.grouped && type === 'list') ? 'listbox' : null"
2480
+ [attr.id]="(dataService.grouped && type === 'list') ? id : null"
2481
+ [attr.aria-live]="(dataService.grouped && type === 'list') ? ariaLive : null"
2482
+ [attr.aria-multiselectable]="(dataService.grouped && type === 'list') ? isMultiselect : null"
2483
+ [attr.aria-hidden]="(dataService.grouped && type === 'list') ? (!show ? true : null) : null"
2484
+ [attr.aria-label]="(dataService.grouped && type === 'list') ? (ariaLabel || null) : null"
2395
2485
  >
2396
2486
  @if (!dataService.grouped) {
2397
2487
  <ul #list
@@ -2400,7 +2490,8 @@ class ListComponent {
2400
2490
  [attr.id]="id"
2401
2491
  [attr.aria-live]="ariaLive"
2402
2492
  [attr.aria-multiselectable]="isMultiselect"
2403
- [attr.aria-hidden]="!show">
2493
+ [attr.aria-hidden]="!show ? true : null"
2494
+ [attr.aria-label]="ariaLabel || null">
2404
2495
  @for (dataItem of data; track $index; let itemIndex = $index) {
2405
2496
  <li
2406
2497
  role="option"
@@ -2411,7 +2502,7 @@ class ListComponent {
2411
2502
  [multipleSelection]="multipleSelection"
2412
2503
  [attr.id]="optionPrefix + '-' + itemIndex"
2413
2504
  [attr.tabIndex]="-1"
2414
- [attr.aria-selected]="isItemSelected(itemIndex)"
2505
+ [attr.aria-selected]="itemAriaSelected(itemIndex)"
2415
2506
  [class]="listItemClass"
2416
2507
  [ngClass]="{
2417
2508
  'k-disabled': isDisabled(itemIndex),
@@ -2420,15 +2511,14 @@ class ListComponent {
2420
2511
  [style.width.px]="rowWidth ?? null"
2421
2512
  >
2422
2513
  @if (checkboxes.enabled) {
2423
- <input
2424
- type="checkbox"
2425
- class="k-checkbox"
2514
+ <kendo-checkbox
2515
+ [checkedState]="isChecked(itemIndex)"
2426
2516
  role="presentation"
2427
- tabindex="-1"
2517
+ [tabindex]="-1"
2428
2518
  [ngClass]="checkboxClasses"
2429
- (change)="onCheckedChange($event, itemIndex + startFrom)"
2430
- [checked]="isChecked(itemIndex)"
2431
- />
2519
+ (checkedStateChange)="onCheckboxStateChange($event, itemIndex + startFrom)"
2520
+ >
2521
+ </kendo-checkbox>
2432
2522
  }
2433
2523
  @if (template) {
2434
2524
  <ng-template
@@ -2452,7 +2542,7 @@ class ListComponent {
2452
2542
  </ul>
2453
2543
  }
2454
2544
 
2455
- @if (dataService.grouped) {
2545
+ @if (dataService.grouped && type === 'list') {
2456
2546
  <ng-container #list>
2457
2547
  @for (dataItem of groupedData; track dataItem.groupIndex) {
2458
2548
  <ul
@@ -2499,7 +2589,7 @@ class ListComponent {
2499
2589
  [attr.absolute-index]="item.index"
2500
2590
  [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
2501
2591
  [attr.tabIndex]="-1"
2502
- [attr.aria-selected]="isItemSelected(item.offsetIndex)"
2592
+ [attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
2503
2593
  [class]="listItemClass"
2504
2594
  [ngClass]="{
2505
2595
  'k-disabled': isDisabled(item.offsetIndex),
@@ -2529,21 +2619,130 @@ class ListComponent {
2529
2619
  }
2530
2620
  </ng-container>
2531
2621
  }
2622
+
2623
+ @if (dataService.grouped && type === 'dropdowngrid') {
2624
+ <ul #list
2625
+ [attr.role]="'listbox'"
2626
+ [class]="listClass"
2627
+ [attr.id]="id"
2628
+ [attr.aria-live]="ariaLive"
2629
+ [attr.aria-label]="ariaLabel || null">
2630
+ @if (columnsWidths?.length) {
2631
+ <div
2632
+ role="presentation"
2633
+ aria-hidden="true"
2634
+ [style.display]="'table-column-group'"
2635
+ >
2636
+ @for (columnWidth of columnsWidths; track $index) {
2637
+ <div [style.display]="'table-column'" [style.width.px]="columnWidth ?? null"></div>
2638
+ }
2639
+ </div>
2640
+ }
2641
+ @for (dataItem of groupedData; track dataItem.groupIndex) {
2642
+ @if (dataItem.header) {
2643
+ <li
2644
+ role="presentation"
2645
+ [class]="listGroupItemClass"
2646
+ [attr.group-index]="dataItem.index"
2647
+ [style.width.px]="rowWidth ?? null"
2648
+ >
2649
+ <span [class]="listGroupItemTextClass">
2650
+ @if (groupTemplate) {
2651
+ <ng-template
2652
+ [templateContext]="{
2653
+ templateRef: groupTemplate.templateRef,
2654
+ $implicit: dataItem.value
2655
+ }">
2656
+ </ng-template>
2657
+ }
2658
+ @if (!groupTemplate) {
2659
+ {{ dataItem.value }}
2660
+ }
2661
+ </span>
2662
+ </li>
2663
+ }
2664
+ @for (item of dataItem.items; track item.offsetIndex) {
2665
+ <li
2666
+ role="option"
2667
+ kendoDropDownsSelectable
2668
+ [height]="virtual?.itemHeight"
2669
+ [index]="item.offsetIndex"
2670
+ [multipleSelection]="multipleSelection"
2671
+ [attr.absolute-index]="item.index"
2672
+ [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
2673
+ [attr.tabIndex]="-1"
2674
+ [attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
2675
+ [class]="listItemClass"
2676
+ [ngClass]="{
2677
+ 'k-disabled': isDisabled(item.offsetIndex),
2678
+ 'k-table-alt-row': isAltRow(item.index - 1)
2679
+ }"
2680
+ [style.width.px]="rowWidth ?? null">
2681
+ @if (template) {
2682
+ <ng-template
2683
+ [templateContext]="{
2684
+ templateRef: template.templateRef,
2685
+ $implicit: item.value
2686
+ }">
2687
+ </ng-template>
2688
+ }
2689
+ @if (!template) {
2690
+ <span class="k-list-item-text">{{ getText(item.value) }}</span>
2691
+ }
2692
+ </li>
2693
+ }
2694
+ }
2695
+ @if (!virtual) {
2696
+ <kendo-resize-sensor
2697
+ (resize)="listResize.emit()"
2698
+ >
2699
+ </kendo-resize-sensor>
2700
+ }
2701
+ </ul>
2702
+ }
2532
2703
  @if (virtual) {
2533
- <div #virtualContainer class="k-height-container" role="presentation">
2704
+ <div #virtualContainer class="k-height-container">
2534
2705
  <div [style.height.px]="scrollHeight">
2535
2706
  <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
2536
2707
  </div>
2537
2708
  </div>
2538
2709
  }
2539
2710
  </div>
2540
- `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { 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"] }] });
2711
+ <ng-content select=".k-no-data"></ng-content>
2712
+ `, isInline: true, dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { 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"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
2541
2713
  }
2542
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ListComponent, decorators: [{
2714
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ListComponent, decorators: [{
2543
2715
  type: Component,
2544
2716
  args: [{
2545
2717
  selector: 'kendo-list',
2546
2718
  template: `
2719
+ @if (selectAll) {
2720
+ <div class="k-list-sticky-header">
2721
+ <div
2722
+ class="k-list-sticky-header-item"
2723
+ [class.k-selected]="!checkboxes.enabled && isAllSelected"
2724
+ [class.k-focus]="isSelectAllFocused()"
2725
+ kendoDropDownsSelectable
2726
+ [checkboxes]="checkboxes"
2727
+ [index]="-2"
2728
+ tabindex="0"
2729
+ [attr.aria-selected]="isAllSelected"
2730
+ [attr.aria-label]="selectAllText"
2731
+ (click)="handleSelectAllClick()">
2732
+ @if (checkboxes.enabled) {
2733
+ <kendo-checkbox
2734
+ [checkedState]="selectAllCheckboxState"
2735
+ [ngClass]="checkboxClasses"
2736
+ [inputAttributes]="{ 'aria-label': selectAllText }"
2737
+ (click)="$event.stopPropagation()"
2738
+ (checkedStateChange)="handleSelectAllStateChange($event)"
2739
+ >
2740
+ </kendo-checkbox>
2741
+ }
2742
+ <span class="k-list-item-text">{{ selectAllText }}</span>
2743
+ </div>
2744
+ </div>
2745
+ }
2547
2746
  @if (defaultItem && !template) {
2548
2747
  <div
2549
2748
  class="k-list-optionlabel"
@@ -2613,11 +2812,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
2613
2812
  [style.maxHeight.px]="height"
2614
2813
  unselectable="on"
2615
2814
  (scroll)="popupListScroll.emit($event)"
2616
- [attr.role]="dataService.grouped ? 'listbox' : null"
2617
- [attr.id]="dataService.grouped ? id : null"
2618
- [attr.aria-live]="dataService.grouped ? ariaLive : null"
2619
- [attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
2620
- [attr.aria-hidden]="dataService.grouped ? !show : null"
2815
+ [attr.role]="(dataService.grouped && type === 'list') ? 'listbox' : null"
2816
+ [attr.id]="(dataService.grouped && type === 'list') ? id : null"
2817
+ [attr.aria-live]="(dataService.grouped && type === 'list') ? ariaLive : null"
2818
+ [attr.aria-multiselectable]="(dataService.grouped && type === 'list') ? isMultiselect : null"
2819
+ [attr.aria-hidden]="(dataService.grouped && type === 'list') ? (!show ? true : null) : null"
2820
+ [attr.aria-label]="(dataService.grouped && type === 'list') ? (ariaLabel || null) : null"
2621
2821
  >
2622
2822
  @if (!dataService.grouped) {
2623
2823
  <ul #list
@@ -2626,7 +2826,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
2626
2826
  [attr.id]="id"
2627
2827
  [attr.aria-live]="ariaLive"
2628
2828
  [attr.aria-multiselectable]="isMultiselect"
2629
- [attr.aria-hidden]="!show">
2829
+ [attr.aria-hidden]="!show ? true : null"
2830
+ [attr.aria-label]="ariaLabel || null">
2630
2831
  @for (dataItem of data; track $index; let itemIndex = $index) {
2631
2832
  <li
2632
2833
  role="option"
@@ -2637,7 +2838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
2637
2838
  [multipleSelection]="multipleSelection"
2638
2839
  [attr.id]="optionPrefix + '-' + itemIndex"
2639
2840
  [attr.tabIndex]="-1"
2640
- [attr.aria-selected]="isItemSelected(itemIndex)"
2841
+ [attr.aria-selected]="itemAriaSelected(itemIndex)"
2641
2842
  [class]="listItemClass"
2642
2843
  [ngClass]="{
2643
2844
  'k-disabled': isDisabled(itemIndex),
@@ -2646,15 +2847,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
2646
2847
  [style.width.px]="rowWidth ?? null"
2647
2848
  >
2648
2849
  @if (checkboxes.enabled) {
2649
- <input
2650
- type="checkbox"
2651
- class="k-checkbox"
2850
+ <kendo-checkbox
2851
+ [checkedState]="isChecked(itemIndex)"
2652
2852
  role="presentation"
2653
- tabindex="-1"
2853
+ [tabindex]="-1"
2654
2854
  [ngClass]="checkboxClasses"
2655
- (change)="onCheckedChange($event, itemIndex + startFrom)"
2656
- [checked]="isChecked(itemIndex)"
2657
- />
2855
+ (checkedStateChange)="onCheckboxStateChange($event, itemIndex + startFrom)"
2856
+ >
2857
+ </kendo-checkbox>
2658
2858
  }
2659
2859
  @if (template) {
2660
2860
  <ng-template
@@ -2678,7 +2878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
2678
2878
  </ul>
2679
2879
  }
2680
2880
 
2681
- @if (dataService.grouped) {
2881
+ @if (dataService.grouped && type === 'list') {
2682
2882
  <ng-container #list>
2683
2883
  @for (dataItem of groupedData; track dataItem.groupIndex) {
2684
2884
  <ul
@@ -2725,7 +2925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
2725
2925
  [attr.absolute-index]="item.index"
2726
2926
  [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
2727
2927
  [attr.tabIndex]="-1"
2728
- [attr.aria-selected]="isItemSelected(item.offsetIndex)"
2928
+ [attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
2729
2929
  [class]="listItemClass"
2730
2930
  [ngClass]="{
2731
2931
  'k-disabled': isDisabled(item.offsetIndex),
@@ -2755,19 +2955,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
2755
2955
  }
2756
2956
  </ng-container>
2757
2957
  }
2958
+
2959
+ @if (dataService.grouped && type === 'dropdowngrid') {
2960
+ <ul #list
2961
+ [attr.role]="'listbox'"
2962
+ [class]="listClass"
2963
+ [attr.id]="id"
2964
+ [attr.aria-live]="ariaLive"
2965
+ [attr.aria-label]="ariaLabel || null">
2966
+ @if (columnsWidths?.length) {
2967
+ <div
2968
+ role="presentation"
2969
+ aria-hidden="true"
2970
+ [style.display]="'table-column-group'"
2971
+ >
2972
+ @for (columnWidth of columnsWidths; track $index) {
2973
+ <div [style.display]="'table-column'" [style.width.px]="columnWidth ?? null"></div>
2974
+ }
2975
+ </div>
2976
+ }
2977
+ @for (dataItem of groupedData; track dataItem.groupIndex) {
2978
+ @if (dataItem.header) {
2979
+ <li
2980
+ role="presentation"
2981
+ [class]="listGroupItemClass"
2982
+ [attr.group-index]="dataItem.index"
2983
+ [style.width.px]="rowWidth ?? null"
2984
+ >
2985
+ <span [class]="listGroupItemTextClass">
2986
+ @if (groupTemplate) {
2987
+ <ng-template
2988
+ [templateContext]="{
2989
+ templateRef: groupTemplate.templateRef,
2990
+ $implicit: dataItem.value
2991
+ }">
2992
+ </ng-template>
2993
+ }
2994
+ @if (!groupTemplate) {
2995
+ {{ dataItem.value }}
2996
+ }
2997
+ </span>
2998
+ </li>
2999
+ }
3000
+ @for (item of dataItem.items; track item.offsetIndex) {
3001
+ <li
3002
+ role="option"
3003
+ kendoDropDownsSelectable
3004
+ [height]="virtual?.itemHeight"
3005
+ [index]="item.offsetIndex"
3006
+ [multipleSelection]="multipleSelection"
3007
+ [attr.absolute-index]="item.index"
3008
+ [attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
3009
+ [attr.tabIndex]="-1"
3010
+ [attr.aria-selected]="itemAriaSelected(item.offsetIndex)"
3011
+ [class]="listItemClass"
3012
+ [ngClass]="{
3013
+ 'k-disabled': isDisabled(item.offsetIndex),
3014
+ 'k-table-alt-row': isAltRow(item.index - 1)
3015
+ }"
3016
+ [style.width.px]="rowWidth ?? null">
3017
+ @if (template) {
3018
+ <ng-template
3019
+ [templateContext]="{
3020
+ templateRef: template.templateRef,
3021
+ $implicit: item.value
3022
+ }">
3023
+ </ng-template>
3024
+ }
3025
+ @if (!template) {
3026
+ <span class="k-list-item-text">{{ getText(item.value) }}</span>
3027
+ }
3028
+ </li>
3029
+ }
3030
+ }
3031
+ @if (!virtual) {
3032
+ <kendo-resize-sensor
3033
+ (resize)="listResize.emit()"
3034
+ >
3035
+ </kendo-resize-sensor>
3036
+ }
3037
+ </ul>
3038
+ }
2758
3039
  @if (virtual) {
2759
- <div #virtualContainer class="k-height-container" role="presentation">
3040
+ <div #virtualContainer class="k-height-container">
2760
3041
  <div [style.height.px]="scrollHeight">
2761
3042
  <kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
2762
3043
  </div>
2763
3044
  </div>
2764
3045
  }
2765
3046
  </div>
3047
+ <ng-content select=".k-no-data"></ng-content>
2766
3048
  `,
2767
3049
  standalone: true,
2768
- imports: [NgStyle, TemplateContextDirective, ListItemDirective, SelectableDirective, NgClass, ResizeSensorComponent]
3050
+ imports: [NgStyle, TemplateContextDirective, ListItemDirective, SelectableDirective, NgClass, ResizeSensorComponent, CheckBoxComponent]
2769
3051
  }]
2770
- }], ctorParameters: () => [{ type: DataService }, { type: i0.ElementRef }, { type: SelectionService }, { type: DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }], propDecorators: { selected: [{
3052
+ }], ctorParameters: () => [{ type: DataService }, { type: i0.ElementRef }, { type: SelectionService }, { type: DisabledItemsService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i0.Injector }], propDecorators: { selected: [{
2771
3053
  type: Input
2772
3054
  }], focused: [{
2773
3055
  type: Input
@@ -2799,6 +3081,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
2799
3081
  type: Input
2800
3082
  }], ariaLive: [{
2801
3083
  type: Input
3084
+ }], ariaLabel: [{
3085
+ type: Input
2802
3086
  }], isMultiselect: [{
2803
3087
  type: Input
2804
3088
  }], isActionSheetExpanded: [{
@@ -2807,6 +3091,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
2807
3091
  type: Input
2808
3092
  }], rowWidth: [{
2809
3093
  type: Input
3094
+ }], columnsWidths: [{
3095
+ type: Input
2810
3096
  }], customItemTemplate: [{
2811
3097
  type: Input
2812
3098
  }], text: [{
@@ -2815,6 +3101,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
2815
3101
  type: Input
2816
3102
  }], defaultItem: [{
2817
3103
  type: Input
3104
+ }], selectAll: [{
3105
+ type: Input
3106
+ }], selectAllText: [{
3107
+ type: Input
3108
+ }], isAllSelected: [{
3109
+ type: Input
3110
+ }], isPartiallySelected: [{
3111
+ type: Input
3112
+ }], selectAllClick: [{
3113
+ type: Output
2818
3114
  }], data: [{
2819
3115
  type: Input
2820
3116
  }], size: [{
@@ -2878,6 +3174,7 @@ class AdaptiveRendererComponent {
2878
3174
  placeholder;
2879
3175
  searchBarValue;
2880
3176
  filterable;
3177
+ showListContainer = true;
2881
3178
  closePopup = new EventEmitter();
2882
3179
  textInputChange = new EventEmitter();
2883
3180
  navigate = new EventEmitter();
@@ -2890,6 +3187,7 @@ class AdaptiveRendererComponent {
2890
3187
  }
2891
3188
  animationDuration = animationDuration;
2892
3189
  checkIcon = checkIcon;
3190
+ searchIcon = searchIcon;
2893
3191
  expanded = false;
2894
3192
  messageFor(key) {
2895
3193
  return this.localization.get(key);
@@ -2914,8 +3212,8 @@ class AdaptiveRendererComponent {
2914
3212
  get windowSize() {
2915
3213
  return this.adaptiveService.size;
2916
3214
  }
2917
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
2918
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
3215
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
3216
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-adaptive-renderer", inputs: { title: "title", subtitle: "subtitle", showTextInput: "showTextInput", sharedPopupActionSheetTemplate: "sharedPopupActionSheetTemplate", text: "text", placeholder: "placeholder", searchBarValue: "searchBarValue", filterable: "filterable", showListContainer: "showListContainer" }, outputs: { closePopup: "closePopup", textInputChange: "textInputChange", navigate: "navigate", onExpand: "onExpand" }, viewQueries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "actionSheetSearchBar", first: true, predicate: ["actionSheetSearchBar"], descendants: true }], ngImport: i0, template: `
2919
3217
  <kendo-actionsheet
2920
3218
  #actionSheet
2921
3219
  [animation]="{ duration: animationDuration }"
@@ -2934,7 +3232,7 @@ class AdaptiveRendererComponent {
2934
3232
  (collapse)="closePopup.emit()"
2935
3233
  >
2936
3234
  <ng-template kendoActionSheetTemplate>
2937
- <div class="k-text-center k-actionsheet-titlebar">
3235
+ <div class="k-actionsheet-titlebar">
2938
3236
  <div class="k-actionsheet-titlebar-group">
2939
3237
  <div class="k-actionsheet-title">
2940
3238
  @if (title) {
@@ -2950,6 +3248,7 @@ class AdaptiveRendererComponent {
2950
3248
  icon="check"
2951
3249
  type="button"
2952
3250
  [attr.title]="messageFor('adaptiveCloseButtonTitle')"
3251
+ [attr.aria-label]="messageFor('adaptiveCloseButtonTitle')"
2953
3252
  [svgIcon]="checkIcon"
2954
3253
  fillMode="flat"
2955
3254
  themeColor="primary"
@@ -2967,13 +3266,13 @@ class AdaptiveRendererComponent {
2967
3266
  [value]="searchBarValue || ''"
2968
3267
  size="large"
2969
3268
  [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
2970
- class="k-searchbox"
3269
+ [inputAttributes]="{'aria-label': title}"
2971
3270
  autocomplete="off"
2972
3271
  (valueChange)="onValueChange($event)"
2973
3272
  >
2974
3273
  @if (filterable) {
2975
3274
  <ng-template kendoTextBoxPrefixTemplate>
2976
- <kendo-icon name="search"></kendo-icon>
3275
+ <kendo-icon-wrapper name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
2977
3276
  </ng-template>
2978
3277
  }
2979
3278
  </kendo-textbox>
@@ -2981,15 +3280,19 @@ class AdaptiveRendererComponent {
2981
3280
  }
2982
3281
  </div>
2983
3282
  <div class="k-actionsheet-content">
3283
+ @if (showListContainer) {
2984
3284
  <div class="k-list-container">
2985
3285
  <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
2986
3286
  </div>
3287
+ } @else {
3288
+ <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
3289
+ }
2987
3290
  </div>
2988
3291
  </ng-template>
2989
3292
  </kendo-actionsheet>
2990
- `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
3293
+ `, isInline: true, dependencies: [{ kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "directive", type: ActionSheetTemplateDirective, selector: "[kendoActionSheetTemplate]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "[kendoTextBoxPrefixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
2991
3294
  }
2992
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
3295
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
2993
3296
  type: Component,
2994
3297
  args: [{
2995
3298
  selector: 'kendo-adaptive-renderer',
@@ -3012,7 +3315,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
3012
3315
  (collapse)="closePopup.emit()"
3013
3316
  >
3014
3317
  <ng-template kendoActionSheetTemplate>
3015
- <div class="k-text-center k-actionsheet-titlebar">
3318
+ <div class="k-actionsheet-titlebar">
3016
3319
  <div class="k-actionsheet-titlebar-group">
3017
3320
  <div class="k-actionsheet-title">
3018
3321
  @if (title) {
@@ -3028,6 +3331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
3028
3331
  icon="check"
3029
3332
  type="button"
3030
3333
  [attr.title]="messageFor('adaptiveCloseButtonTitle')"
3334
+ [attr.aria-label]="messageFor('adaptiveCloseButtonTitle')"
3031
3335
  [svgIcon]="checkIcon"
3032
3336
  fillMode="flat"
3033
3337
  themeColor="primary"
@@ -3045,13 +3349,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
3045
3349
  [value]="searchBarValue || ''"
3046
3350
  size="large"
3047
3351
  [placeholder]="filterable ? messageFor('filterInputPlaceholder') : placeholder"
3048
- class="k-searchbox"
3352
+ [inputAttributes]="{'aria-label': title}"
3049
3353
  autocomplete="off"
3050
3354
  (valueChange)="onValueChange($event)"
3051
3355
  >
3052
3356
  @if (filterable) {
3053
3357
  <ng-template kendoTextBoxPrefixTemplate>
3054
- <kendo-icon name="search"></kendo-icon>
3358
+ <kendo-icon-wrapper name="search" [svgIcon]="searchIcon"></kendo-icon-wrapper>
3055
3359
  </ng-template>
3056
3360
  }
3057
3361
  </kendo-textbox>
@@ -3059,15 +3363,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
3059
3363
  }
3060
3364
  </div>
3061
3365
  <div class="k-actionsheet-content">
3366
+ @if (showListContainer) {
3062
3367
  <div class="k-list-container">
3063
3368
  <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
3064
3369
  </div>
3370
+ } @else {
3371
+ <ng-container *ngTemplateOutlet="sharedPopupActionSheetTemplate"></ng-container>
3372
+ }
3065
3373
  </div>
3066
3374
  </ng-template>
3067
3375
  </kendo-actionsheet>
3068
3376
  `,
3069
3377
  standalone: true,
3070
- imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconComponent, NgTemplateOutlet]
3378
+ imports: [ActionSheetComponent, ActionSheetTemplateDirective, ButtonComponent, TextBoxComponent, TextBoxPrefixTemplateDirective, IconWrapperComponent, NgTemplateOutlet]
3071
3379
  }]
3072
3380
  }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i7.AdaptiveService }], propDecorators: { title: [{
3073
3381
  type: Input
@@ -3085,6 +3393,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
3085
3393
  type: Input
3086
3394
  }], filterable: [{
3087
3395
  type: Input
3396
+ }], showListContainer: [{
3397
+ type: Input
3088
3398
  }], closePopup: [{
3089
3399
  type: Output
3090
3400
  }], textInputChange: [{
@@ -3183,10 +3493,10 @@ class SharedDropDownEventsDirective {
3183
3493
  ngOnDestroy() {
3184
3494
  this.subscriptions.unsubscribe();
3185
3495
  }
3186
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SharedDropDownEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
3187
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SharedDropDownEventsDirective, isStandalone: true, selector: "[kendoDropDownSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
3496
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SharedDropDownEventsDirective, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
3497
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: SharedDropDownEventsDirective, isStandalone: true, selector: "[kendoDropDownSharedEvents]", inputs: { hostElement: "hostElement", clearButtonClicked: "clearButtonClicked", isFocused: "isFocused" }, outputs: { isFocusedChange: "isFocusedChange", onFocus: "onFocus", handleBlur: "handleBlur" }, ngImport: i0 });
3188
3498
  }
3189
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SharedDropDownEventsDirective, decorators: [{
3499
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SharedDropDownEventsDirective, decorators: [{
3190
3500
  type: Directive,
3191
3501
  args: [{
3192
3502
  selector: '[kendoDropDownSharedEvents]',
@@ -3219,15 +3529,19 @@ class Messages extends ComponentMessages {
3219
3529
  */
3220
3530
  clearTitle;
3221
3531
  /**
3222
- * The text displayed for the check-all checkbox.
3532
+ * The text of the Select All item in the popup.
3533
+ */
3534
+ selectAllText;
3535
+ /**
3536
+ * The text of the Check All checkbox label in the tree popup.
3223
3537
  */
3224
3538
  checkAllText;
3225
3539
  /**
3226
- * The text set as aria-label on the select button.
3540
+ * The text set as aria-label on the select button. Available for DropDownList, ComboBox, MultiColumnComboBox, and DropDownTree.
3227
3541
  */
3228
3542
  selectButtonText;
3229
3543
  /**
3230
- * The text set as aria-label on the list filter input.
3544
+ * The text set as aria-label on the list filter input. Available for DropDownList, DropDownTree, and MultiSelectTree.
3231
3545
  */
3232
3546
  filterInputLabel;
3233
3547
  /**
@@ -3239,11 +3553,15 @@ class Messages extends ComponentMessages {
3239
3553
  */
3240
3554
  adaptiveCloseButtonTitle;
3241
3555
  /**
3242
- * The text for the input's placeholder when filtering is enabled.
3556
+ * The text for the input's placeholder when filtering is enabled. Available for DropDownTree and MultiSelectTree.
3243
3557
  */
3244
3558
  filterInputPlaceholder;
3245
3559
  /**
3246
- * The text displayed when the user types a custom value that is not in the list of options.
3560
+ * The accessible label of the tag list element that contains the selected items. Available for MultiSelect and MultiSelectTree.
3561
+ */
3562
+ chipListLabel;
3563
+ /**
3564
+ * The text displayed when the user types a custom value that is not in the list of options. Available for ComboBox and MultiSelect.
3247
3565
  *
3248
3566
  * The text includes a localizable string and the custom value.
3249
3567
  * For example, when adding a custom value **Test**, the default text is **Use "Test"**.
@@ -3252,15 +3570,25 @@ class Messages extends ComponentMessages {
3252
3570
  * Use `{customValue}` to insert the value, for example, **Add: {customValue}**.
3253
3571
  */
3254
3572
  useCustomValueText;
3255
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
3256
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: Messages, isStandalone: true, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder", useCustomValueText: "useCustomValueText" }, usesInheritance: true, ngImport: i0 });
3573
+ /**
3574
+ * The accessible label of the listbox that contains the list of options. Available for DropDownList, ComboBox, MultiColumnComboBox, AutoComplete, and MultiSelect.
3575
+ */
3576
+ listboxLabel;
3577
+ /**
3578
+ * The accessible label of the input element. Available for MultiSelectTree.
3579
+ */
3580
+ inputLabel;
3581
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
3582
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: Messages, isStandalone: true, inputs: { noDataText: "noDataText", clearTitle: "clearTitle", selectAllText: "selectAllText", checkAllText: "checkAllText", selectButtonText: "selectButtonText", filterInputLabel: "filterInputLabel", popupLabel: "popupLabel", adaptiveCloseButtonTitle: "adaptiveCloseButtonTitle", filterInputPlaceholder: "filterInputPlaceholder", chipListLabel: "chipListLabel", useCustomValueText: "useCustomValueText", listboxLabel: "listboxLabel", inputLabel: "inputLabel" }, usesInheritance: true, ngImport: i0 });
3257
3583
  }
3258
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: Messages, decorators: [{
3584
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: Messages, decorators: [{
3259
3585
  type: Directive
3260
3586
  }], propDecorators: { noDataText: [{
3261
3587
  type: Input
3262
3588
  }], clearTitle: [{
3263
3589
  type: Input
3590
+ }], selectAllText: [{
3591
+ type: Input
3264
3592
  }], checkAllText: [{
3265
3593
  type: Input
3266
3594
  }], selectButtonText: [{
@@ -3273,8 +3601,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
3273
3601
  type: Input
3274
3602
  }], filterInputPlaceholder: [{
3275
3603
  type: Input
3604
+ }], chipListLabel: [{
3605
+ type: Input
3276
3606
  }], useCustomValueText: [{
3277
3607
  type: Input
3608
+ }], listboxLabel: [{
3609
+ type: Input
3610
+ }], inputLabel: [{
3611
+ type: Input
3278
3612
  }] } });
3279
3613
 
3280
3614
  /**
@@ -3286,15 +3620,15 @@ class LocalizedMessagesDirective extends Messages {
3286
3620
  super();
3287
3621
  this.service = service;
3288
3622
  }
3289
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
3290
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n ", providers: [
3623
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
3624
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: LocalizedMessagesDirective, isStandalone: true, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n ", providers: [
3291
3625
  {
3292
3626
  provide: Messages,
3293
3627
  useExisting: forwardRef(() => LocalizedMessagesDirective)
3294
3628
  }
3295
3629
  ], usesInheritance: true, ngImport: i0 });
3296
3630
  }
3297
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
3631
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
3298
3632
  type: Directive,
3299
3633
  args: [{
3300
3634
  providers: [
@@ -3431,7 +3765,7 @@ class AutoCompleteComponent {
3431
3765
  * @hidden
3432
3766
  */
3433
3767
  get ariaControls() {
3434
- return this.isOpen ? this.listBoxId : undefined;
3768
+ return (!this.isAdaptive && this.isOpen) ? this.listBoxId : undefined;
3435
3769
  }
3436
3770
  /**
3437
3771
  * @hidden
@@ -4451,8 +4785,8 @@ class AutoCompleteComponent {
4451
4785
  this.togglePopup(false);
4452
4786
  }
4453
4787
  }
4454
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: DataService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
4455
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
4788
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteComponent, deps: [{ token: i1.LocalizationService }, { token: DataService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
4789
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: AutoCompleteComponent, isStandalone: true, selector: "kendo-autocomplete", inputs: { highlightFirst: "highlightFirst", showStickyHeader: "showStickyHeader", focusableId: "focusableId", data: "data", value: "value", valueField: "valueField", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", clearButton: "clearButton", suggest: "suggest", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode", inputAttributes: "inputAttributes" }, outputs: { valueChange: "valueChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
4456
4790
  AUTOCOMPLETE_VALUE_ACCESSOR,
4457
4791
  DataService,
4458
4792
  SelectionService,
@@ -4485,6 +4819,9 @@ class AutoCompleteComponent {
4485
4819
 
4486
4820
  i18n-adaptiveCloseButtonTitle="kendo.autocomplete.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
4487
4821
  adaptiveCloseButtonTitle="Close"
4822
+
4823
+ i18n-listboxLabel="kendo.autocomplete.listboxLabel|The accessible label of the list of suggestions"
4824
+ listboxLabel="Suggestions"
4488
4825
  >
4489
4826
  </ng-container>
4490
4827
 
@@ -4506,9 +4843,9 @@ class AutoCompleteComponent {
4506
4843
  }
4507
4844
  <input
4508
4845
  kendoSearchbar
4509
- [ariaExpanded]="isOpen"
4846
+ [ariaExpanded]="isAdaptive ? false : isOpen"
4510
4847
  [isSuggestable]="suggest"
4511
- [isFilterable]="filterable"
4848
+ [hasListAutocomplete]="filterable"
4512
4849
  [isLoading]="isLoading"
4513
4850
  [ariaControls]="ariaControls"
4514
4851
  [id]="focusableId"
@@ -4604,24 +4941,25 @@ class AutoCompleteComponent {
4604
4941
  [show]="isOpen"
4605
4942
  [virtual]="virtual"
4606
4943
  [showStickyHeader]="showStickyHeader"
4944
+ [ariaLabel]="messageFor('listboxLabel')"
4607
4945
  (pageChange)="pageChange($event)"
4608
4946
  >
4947
+ <!--no-data template-->
4948
+ @if (data.length === 0) {
4949
+ <div class="k-no-data" [attr.aria-live]="'polite'">
4950
+ @if (noDataTemplate) {
4951
+ <ng-template
4952
+ [templateContext]="{
4953
+ templateRef: noDataTemplate?.templateRef
4954
+ }">
4955
+ </ng-template>
4956
+ }
4957
+ @if (!noDataTemplate) {
4958
+ <div>{{ messageFor('noDataText') }}</div>
4959
+ }
4960
+ </div>
4961
+ }
4609
4962
  </kendo-list>
4610
- <!--no-data template-->
4611
- @if (data.length === 0) {
4612
- <div class="k-no-data" [attr.aria-live]="'polite'">
4613
- @if (noDataTemplate) {
4614
- <ng-template
4615
- [templateContext]="{
4616
- templateRef: noDataTemplate?.templateRef
4617
- }">
4618
- </ng-template>
4619
- }
4620
- @if (!noDataTemplate) {
4621
- <div>{{ messageFor('noDataText') }}</div>
4622
- }
4623
- </div>
4624
- }
4625
4963
  <!--footer template-->
4626
4964
  @if (footerTemplate) {
4627
4965
  <ng-template
@@ -4631,9 +4969,9 @@ class AutoCompleteComponent {
4631
4969
  </ng-template>
4632
4970
  }
4633
4971
  </ng-template>
4634
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
4972
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
4635
4973
  }
4636
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutoCompleteComponent, decorators: [{
4974
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteComponent, decorators: [{
4637
4975
  type: Component,
4638
4976
  args: [{
4639
4977
  exportAs: 'kendoAutoComplete',
@@ -4672,6 +5010,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
4672
5010
 
4673
5011
  i18n-adaptiveCloseButtonTitle="kendo.autocomplete.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
4674
5012
  adaptiveCloseButtonTitle="Close"
5013
+
5014
+ i18n-listboxLabel="kendo.autocomplete.listboxLabel|The accessible label of the list of suggestions"
5015
+ listboxLabel="Suggestions"
4675
5016
  >
4676
5017
  </ng-container>
4677
5018
 
@@ -4693,9 +5034,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
4693
5034
  }
4694
5035
  <input
4695
5036
  kendoSearchbar
4696
- [ariaExpanded]="isOpen"
5037
+ [ariaExpanded]="isAdaptive ? false : isOpen"
4697
5038
  [isSuggestable]="suggest"
4698
- [isFilterable]="filterable"
5039
+ [hasListAutocomplete]="filterable"
4699
5040
  [isLoading]="isLoading"
4700
5041
  [ariaControls]="ariaControls"
4701
5042
  [id]="focusableId"
@@ -4791,24 +5132,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
4791
5132
  [show]="isOpen"
4792
5133
  [virtual]="virtual"
4793
5134
  [showStickyHeader]="showStickyHeader"
5135
+ [ariaLabel]="messageFor('listboxLabel')"
4794
5136
  (pageChange)="pageChange($event)"
4795
5137
  >
5138
+ <!--no-data template-->
5139
+ @if (data.length === 0) {
5140
+ <div class="k-no-data" [attr.aria-live]="'polite'">
5141
+ @if (noDataTemplate) {
5142
+ <ng-template
5143
+ [templateContext]="{
5144
+ templateRef: noDataTemplate?.templateRef
5145
+ }">
5146
+ </ng-template>
5147
+ }
5148
+ @if (!noDataTemplate) {
5149
+ <div>{{ messageFor('noDataText') }}</div>
5150
+ }
5151
+ </div>
5152
+ }
4796
5153
  </kendo-list>
4797
- <!--no-data template-->
4798
- @if (data.length === 0) {
4799
- <div class="k-no-data" [attr.aria-live]="'polite'">
4800
- @if (noDataTemplate) {
4801
- <ng-template
4802
- [templateContext]="{
4803
- templateRef: noDataTemplate?.templateRef
4804
- }">
4805
- </ng-template>
4806
- }
4807
- @if (!noDataTemplate) {
4808
- <div>{{ messageFor('noDataText') }}</div>
4809
- }
4810
- </div>
4811
- }
4812
5154
  <!--footer template-->
4813
5155
  @if (footerTemplate) {
4814
5156
  <ng-template
@@ -5092,7 +5434,7 @@ class ComboBoxComponent extends MultiTabStop {
5092
5434
  * @hidden
5093
5435
  */
5094
5436
  get ariaControls() {
5095
- return this.isOpen ? this.listBoxId : undefined;
5437
+ return (!this.isAdaptive && this.isOpen) ? this.listBoxId : undefined;
5096
5438
  }
5097
5439
  /**
5098
5440
  * @hidden
@@ -5915,7 +6257,7 @@ class ComboBoxComponent extends MultiTabStop {
5915
6257
  * @hidden
5916
6258
  */
5917
6259
  get selectButtonClasses() {
5918
- return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''}`;
6260
+ return `${this.size ? getSizeClass('button', this.size) : ''} ${this.fillMode ? 'k-button-' + this.fillMode : ''} ${this.disabled ? 'k-disabled' : ''}`;
5919
6261
  }
5920
6262
  /**
5921
6263
  * @hidden
@@ -6182,7 +6524,7 @@ class ComboBoxComponent extends MultiTabStop {
6182
6524
  this.zone.run(() => {
6183
6525
  if (valueHasChanged) {
6184
6526
  const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
6185
- if (lowerCaseMatch || unresolvedSelection) {
6527
+ if ((lowerCaseMatch && this.shouldResolveSuggestedItem(currentText)) || unresolvedSelection) {
6186
6528
  this.selectionService.change(this.selectionService.focused);
6187
6529
  }
6188
6530
  else {
@@ -6315,6 +6657,9 @@ class ComboBoxComponent extends MultiTabStop {
6315
6657
  const itemText = getter(this.dataService.itemAt(focused), this.textField);
6316
6658
  return !isPresent(itemText) ? "" : itemText.toString();
6317
6659
  }
6660
+ shouldResolveSuggestedItem(currentText) {
6661
+ return !(this.allowCustom && this.suggest && this.focusedItemText !== currentText);
6662
+ }
6318
6663
  /**
6319
6664
  * Focuses the first match when there's text in the input field, but no focused item.
6320
6665
  */
@@ -6503,7 +6848,7 @@ class ComboBoxComponent extends MultiTabStop {
6503
6848
  this.zone.run(() => {
6504
6849
  if (valueHasChanged) {
6505
6850
  const lowerCaseMatch = isPresent(this.focusedItemText) && this.focusedItemText.toLowerCase() === currentText.toLowerCase();
6506
- if (lowerCaseMatch || unresolvedSelection) {
6851
+ if ((lowerCaseMatch && this.shouldResolveSuggestedItem(currentText)) || unresolvedSelection) {
6507
6852
  this.selectionService.change(this.selectionService.focused);
6508
6853
  }
6509
6854
  else {
@@ -6519,8 +6864,8 @@ class ComboBoxComponent extends MultiTabStop {
6519
6864
  this.togglePopup(false);
6520
6865
  }
6521
6866
  }
6522
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
6523
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: ComboBoxComponent, isStandalone: true, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", inputAttributes: "inputAttributes", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
6867
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
6868
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: ComboBoxComponent, isStandalone: true, selector: "kendo-combobox", inputs: { icon: "icon", svgIcon: "svgIcon", inputAttributes: "inputAttributes", showStickyHeader: "showStickyHeader", focusableId: "focusableId", allowCustom: "allowCustom", data: "data", value: "value", textField: "textField", valueField: "valueField", valuePrimitive: "valuePrimitive", valueNormalizer: "valueNormalizer", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", loading: "loading", suggest: "suggest", clearButton: "clearButton", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", tabindex: "tabindex", tabIndex: "tabIndex", filterable: "filterable", virtual: "virtual", size: "size", rounded: "rounded", fillMode: "fillMode" }, outputs: { valueChange: "valueChange", selectionChange: "selectionChange", filterChange: "filterChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", escape: "escape" }, host: { properties: { "class.k-readonly": "this.readonly", "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.dir": "this.dir" } }, providers: [
6524
6869
  COMBOBOX_VALUE_ACCESSOR,
6525
6870
  DataService,
6526
6871
  SelectionService,
@@ -6557,6 +6902,12 @@ class ComboBoxComponent extends MultiTabStop {
6557
6902
 
6558
6903
  i18n-adaptiveCloseButtonTitle="kendo.combobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
6559
6904
  adaptiveCloseButtonTitle="Close"
6905
+
6906
+ i18n-listboxLabel="kendo.combobox.listboxLabel|The accessible label of the listbox that contains the list of options"
6907
+ listboxLabel="Options"
6908
+
6909
+ i18n-useCustomValueText="kendo.combobox.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
6910
+ useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
6560
6911
  >
6561
6912
  </ng-container>
6562
6913
 
@@ -6578,12 +6929,12 @@ class ComboBoxComponent extends MultiTabStop {
6578
6929
  }
6579
6930
  <input
6580
6931
  kendoSearchbar
6581
- [ariaExpanded]="isOpen"
6932
+ [ariaExpanded]="isAdaptive ? false : isOpen"
6582
6933
  [ariaControls]="ariaControls"
6583
6934
  [id]="focusableId"
6584
6935
  [isLoading]="loading"
6585
6936
  [isSuggestable]="suggest"
6586
- [isFilterable]="filterable"
6937
+ [hasListAutocomplete]="filterable"
6587
6938
  [activeDescendant]="activeDescendant"
6588
6939
  [userInput]="text"
6589
6940
  [suggestedText]="getSuggestion()"
@@ -6603,7 +6954,6 @@ class ComboBoxComponent extends MultiTabStop {
6603
6954
  <span
6604
6955
  class="k-clear-value"
6605
6956
  [style.visibility]="clearButtonVisibility"
6606
- aria-hidden="true"
6607
6957
  [attr.title]="messageFor('clearTitle')"
6608
6958
  (click)="clearValue($event)"
6609
6959
  [kendoEventsOutsideAngular]="{
@@ -6698,24 +7048,27 @@ class ComboBoxComponent extends MultiTabStop {
6698
7048
  [show]="isOpen"
6699
7049
  [virtual]="virtual"
6700
7050
  [showStickyHeader]="showStickyHeader"
7051
+ [ariaLabel]="messageFor('listboxLabel')"
7052
+ [text]="text"
7053
+ [allowCustom]="allowCustom"
6701
7054
  (pageChange)="pageChange($event)"
6702
7055
  >
7056
+ <!--no-data template-->
7057
+ @if (data.length === 0) {
7058
+ <div class="k-no-data" [attr.aria-live]="'polite'">
7059
+ @if (noDataTemplate) {
7060
+ <ng-template
7061
+ [templateContext]="{
7062
+ templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
7063
+ }">
7064
+ </ng-template>
7065
+ }
7066
+ @if (!noDataTemplate) {
7067
+ <div>{{ messageFor('noDataText') }}</div>
7068
+ }
7069
+ </div>
7070
+ }
6703
7071
  </kendo-list>
6704
- <!--no-data template-->
6705
- @if (data.length === 0) {
6706
- <div class="k-no-data" [attr.aria-live]="'polite'">
6707
- @if (noDataTemplate) {
6708
- <ng-template
6709
- [templateContext]="{
6710
- templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
6711
- }">
6712
- </ng-template>
6713
- }
6714
- @if (!noDataTemplate) {
6715
- <div>{{ messageFor('noDataText') }}</div>
6716
- }
6717
- </div>
6718
- }
6719
7072
  <!--footer template-->
6720
7073
  @if (footerTemplate) {
6721
7074
  <ng-template
@@ -6725,9 +7078,9 @@ class ComboBoxComponent extends MultiTabStop {
6725
7078
  </ng-template>
6726
7079
  }
6727
7080
  </ng-template>
6728
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
7081
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
6729
7082
  }
6730
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComboBoxComponent, decorators: [{
7083
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxComponent, decorators: [{
6731
7084
  type: Component,
6732
7085
  args: [{
6733
7086
  exportAs: 'kendoComboBox',
@@ -6770,6 +7123,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
6770
7123
 
6771
7124
  i18n-adaptiveCloseButtonTitle="kendo.combobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
6772
7125
  adaptiveCloseButtonTitle="Close"
7126
+
7127
+ i18n-listboxLabel="kendo.combobox.listboxLabel|The accessible label of the listbox that contains the list of options"
7128
+ listboxLabel="Options"
7129
+
7130
+ i18n-useCustomValueText="kendo.combobox.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
7131
+ useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
6773
7132
  >
6774
7133
  </ng-container>
6775
7134
 
@@ -6791,12 +7150,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
6791
7150
  }
6792
7151
  <input
6793
7152
  kendoSearchbar
6794
- [ariaExpanded]="isOpen"
7153
+ [ariaExpanded]="isAdaptive ? false : isOpen"
6795
7154
  [ariaControls]="ariaControls"
6796
7155
  [id]="focusableId"
6797
7156
  [isLoading]="loading"
6798
7157
  [isSuggestable]="suggest"
6799
- [isFilterable]="filterable"
7158
+ [hasListAutocomplete]="filterable"
6800
7159
  [activeDescendant]="activeDescendant"
6801
7160
  [userInput]="text"
6802
7161
  [suggestedText]="getSuggestion()"
@@ -6816,7 +7175,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
6816
7175
  <span
6817
7176
  class="k-clear-value"
6818
7177
  [style.visibility]="clearButtonVisibility"
6819
- aria-hidden="true"
6820
7178
  [attr.title]="messageFor('clearTitle')"
6821
7179
  (click)="clearValue($event)"
6822
7180
  [kendoEventsOutsideAngular]="{
@@ -6911,24 +7269,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
6911
7269
  [show]="isOpen"
6912
7270
  [virtual]="virtual"
6913
7271
  [showStickyHeader]="showStickyHeader"
7272
+ [ariaLabel]="messageFor('listboxLabel')"
7273
+ [text]="text"
7274
+ [allowCustom]="allowCustom"
6914
7275
  (pageChange)="pageChange($event)"
6915
7276
  >
7277
+ <!--no-data template-->
7278
+ @if (data.length === 0) {
7279
+ <div class="k-no-data" [attr.aria-live]="'polite'">
7280
+ @if (noDataTemplate) {
7281
+ <ng-template
7282
+ [templateContext]="{
7283
+ templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
7284
+ }">
7285
+ </ng-template>
7286
+ }
7287
+ @if (!noDataTemplate) {
7288
+ <div>{{ messageFor('noDataText') }}</div>
7289
+ }
7290
+ </div>
7291
+ }
6916
7292
  </kendo-list>
6917
- <!--no-data template-->
6918
- @if (data.length === 0) {
6919
- <div class="k-no-data" [attr.aria-live]="'polite'">
6920
- @if (noDataTemplate) {
6921
- <ng-template
6922
- [templateContext]="{
6923
- templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
6924
- }">
6925
- </ng-template>
6926
- }
6927
- @if (!noDataTemplate) {
6928
- <div>{{ messageFor('noDataText') }}</div>
6929
- }
6930
- </div>
6931
- }
6932
7293
  <!--footer template-->
6933
7294
  @if (footerTemplate) {
6934
7295
  <ng-template
@@ -7121,10 +7482,10 @@ class ValueTemplateDirective {
7121
7482
  constructor(templateRef) {
7122
7483
  this.templateRef = templateRef;
7123
7484
  }
7124
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
7125
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ValueTemplateDirective, isStandalone: true, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]", ngImport: i0 });
7485
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ValueTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
7486
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ValueTemplateDirective, isStandalone: true, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]", ngImport: i0 });
7126
7487
  }
7127
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ValueTemplateDirective, decorators: [{
7488
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ValueTemplateDirective, decorators: [{
7128
7489
  type: Directive,
7129
7490
  args: [{
7130
7491
  selector: '[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]',
@@ -7151,10 +7512,10 @@ class FilterInputDirective {
7151
7512
  nextTick(fn) {
7152
7513
  this.zone.runOutsideAngular(() => setTimeout(fn));
7153
7514
  }
7154
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
7155
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FilterInputDirective, isStandalone: true, selector: "[filterInput]", inputs: { focused: ["filterInput", "focused"] }, usesOnChanges: true, ngImport: i0 });
7515
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FilterInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
7516
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: FilterInputDirective, isStandalone: true, selector: "[filterInput]", inputs: { focused: ["filterInput", "focused"] }, usesOnChanges: true, ngImport: i0 });
7156
7517
  }
7157
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterInputDirective, decorators: [{
7518
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FilterInputDirective, decorators: [{
7158
7519
  type: Directive,
7159
7520
  args: [{
7160
7521
  selector: '[filterInput]',
@@ -7287,7 +7648,7 @@ class DropDownListComponent {
7287
7648
  * @hidden
7288
7649
  */
7289
7650
  get ariaLive() {
7290
- return this.filterable ? 'polite' : 'off';
7651
+ return this.filterable ? 'polite' : null;
7291
7652
  }
7292
7653
  /**
7293
7654
  * Shows or hides the current group sticky header when using grouped data.
@@ -7676,7 +8037,7 @@ class DropDownListComponent {
7676
8037
  role = 'combobox';
7677
8038
  haspopup = 'listbox';
7678
8039
  get hostAriaInvalid() {
7679
- return this.formControl?.invalid ? true : null;
8040
+ return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
7680
8041
  }
7681
8042
  /**
7682
8043
  * @hidden
@@ -8525,8 +8886,6 @@ class DropDownListComponent {
8525
8886
  }
8526
8887
  closeActionSheet() {
8527
8888
  this.actionSheet.toggle(false);
8528
- this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
8529
- this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
8530
8889
  if (this.filterable) {
8531
8890
  this.adaptiveRenderer.searchBarValue = '';
8532
8891
  this.filterChange.emit('');
@@ -8536,8 +8895,6 @@ class DropDownListComponent {
8536
8895
  openActionSheet() {
8537
8896
  this.actionSheet.toggle(true);
8538
8897
  this.cdr.detectChanges();
8539
- this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
8540
- this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.listBoxId);
8541
8898
  if (!this.dataService.grouped) {
8542
8899
  setListBoxAriaLabelledBy(this.optionsList, this.wrapper, this.renderer);
8543
8900
  }
@@ -8551,8 +8908,8 @@ class DropDownListComponent {
8551
8908
  this.selectionService.focus(this.selectionService.focused);
8552
8909
  this.opened.emit();
8553
8910
  }
8554
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
8555
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
8911
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownListComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
8912
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: DropDownListComponent, isStandalone: true, selector: "kendo-dropdownlist", inputs: { customIconClass: "customIconClass", showStickyHeader: "showStickyHeader", icon: "icon", svgIcon: "svgIcon", loading: "loading", data: "data", value: "value", textField: "textField", valueField: "valueField", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", popupSettings: "popupSettings", listHeight: "listHeight", defaultItem: "defaultItem", disabled: "disabled", itemDisabled: "itemDisabled", readonly: "readonly", filterable: "filterable", virtual: "virtual", ignoreCase: "ignoreCase", delay: "delay", valuePrimitive: "valuePrimitive", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", leftRightArrowsNavigation: "leftRightArrowsNavigation", focusableId: ["id", "focusableId"] }, outputs: { valueChange: "valueChange", filterChange: "filterChange", selectionChange: "selectionChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keypress": "keypress($event)", "click": "click()" }, properties: { "class.k-readonly": "this.readonly", "class.k-dropdownlist": "this.hostClasses", "class.k-picker": "this.hostClasses", "class.k-disabled": "this.isDisabledClass", "attr.aria-disabled": "this.isDisabledClass", "class.k-loading": "this.isLoading", "attr.id": "this.focusableId", "attr.dir": "this.dir", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.readonlyAttr", "attr.aria-busy": "this.isBusy", "attr.role": "this.role", "attr.aria-haspopup": "this.haspopup", "attr.aria-invalid": "this.hostAriaInvalid" } }, providers: [
8556
8913
  DROPDOWNLIST_VALUE_ACCESSOR,
8557
8914
  DataService,
8558
8915
  SelectionService,
@@ -8589,6 +8946,9 @@ class DropDownListComponent {
8589
8946
 
8590
8947
  i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
8591
8948
  filterInputPlaceholder="Filter"
8949
+
8950
+ i18n-listboxLabel="kendo.dropdownlist.listboxLabel|The accessible label of the listbox that contains the list of options"
8951
+ listboxLabel="Options"
8592
8952
  >
8593
8953
  </ng-container>
8594
8954
  <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
@@ -8653,7 +9013,6 @@ class DropDownListComponent {
8653
9013
  class="k-searchbox k-input"
8654
9014
  [ngClass]="filterInputClasses">
8655
9015
  <kendo-icon-wrapper
8656
- class="k-icon"
8657
9016
  innerCssClass="k-input-icon"
8658
9017
  name="search"
8659
9018
  [svgIcon]="searchIcon">
@@ -8704,24 +9063,25 @@ class DropDownListComponent {
8704
9063
  [virtual]="virtual"
8705
9064
  [ariaLive]="ariaLive"
8706
9065
  [showStickyHeader]="showStickyHeader"
9066
+ [ariaLabel]="messageFor('listboxLabel')"
8707
9067
  (pageChange)="pageChange($event)"
8708
9068
  [defaultItem]="defaultItem">
9069
+ <!--no-data template-->
9070
+ @if (data.length === 0) {
9071
+ <div class="k-no-data" [attr.aria-live]="'polite'">
9072
+ @if (noDataTemplate) {
9073
+ <ng-template
9074
+ [templateContext]="{
9075
+ templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
9076
+ }">
9077
+ </ng-template>
9078
+ }
9079
+ @if (!noDataTemplate) {
9080
+ <div>{{ messageFor('noDataText') }}</div>
9081
+ }
9082
+ </div>
9083
+ }
8709
9084
  </kendo-list>
8710
- <!--no-data template-->
8711
- @if (data.length === 0) {
8712
- <div class="k-no-data" [attr.aria-live]="'polite'">
8713
- @if (noDataTemplate) {
8714
- <ng-template
8715
- [templateContext]="{
8716
- templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
8717
- }">
8718
- </ng-template>
8719
- }
8720
- @if (!noDataTemplate) {
8721
- <div>{{ messageFor('noDataText') }}</div>
8722
- }
8723
- </div>
8724
- }
8725
9085
  <!--footer template-->
8726
9086
  @if (footerTemplate) {
8727
9087
  <ng-template
@@ -8731,9 +9091,9 @@ class DropDownListComponent {
8731
9091
  </ng-template>
8732
9092
  }
8733
9093
  </ng-template>
8734
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
9094
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
8735
9095
  }
8736
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownListComponent, decorators: [{
9096
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownListComponent, decorators: [{
8737
9097
  type: Component,
8738
9098
  args: [{
8739
9099
  exportAs: 'kendoDropDownList',
@@ -8776,6 +9136,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
8776
9136
 
8777
9137
  i18n-filterPlaceholder="kendo.dropdownlist.filterPlaceholder|The text for the input's placeholder when filtering is enabled"
8778
9138
  filterInputPlaceholder="Filter"
9139
+
9140
+ i18n-listboxLabel="kendo.dropdownlist.listboxLabel|The accessible label of the listbox that contains the list of options"
9141
+ listboxLabel="Options"
8779
9142
  >
8780
9143
  </ng-container>
8781
9144
  <span class="k-input-inner" unselectable="on" [id]="valueLabelId" (click)="$event.preventDefault()">
@@ -8840,7 +9203,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
8840
9203
  class="k-searchbox k-input"
8841
9204
  [ngClass]="filterInputClasses">
8842
9205
  <kendo-icon-wrapper
8843
- class="k-icon"
8844
9206
  innerCssClass="k-input-icon"
8845
9207
  name="search"
8846
9208
  [svgIcon]="searchIcon">
@@ -8891,24 +9253,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
8891
9253
  [virtual]="virtual"
8892
9254
  [ariaLive]="ariaLive"
8893
9255
  [showStickyHeader]="showStickyHeader"
9256
+ [ariaLabel]="messageFor('listboxLabel')"
8894
9257
  (pageChange)="pageChange($event)"
8895
9258
  [defaultItem]="defaultItem">
9259
+ <!--no-data template-->
9260
+ @if (data.length === 0) {
9261
+ <div class="k-no-data" [attr.aria-live]="'polite'">
9262
+ @if (noDataTemplate) {
9263
+ <ng-template
9264
+ [templateContext]="{
9265
+ templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
9266
+ }">
9267
+ </ng-template>
9268
+ }
9269
+ @if (!noDataTemplate) {
9270
+ <div>{{ messageFor('noDataText') }}</div>
9271
+ }
9272
+ </div>
9273
+ }
8896
9274
  </kendo-list>
8897
- <!--no-data template-->
8898
- @if (data.length === 0) {
8899
- <div class="k-no-data" [attr.aria-live]="'polite'">
8900
- @if (noDataTemplate) {
8901
- <ng-template
8902
- [templateContext]="{
8903
- templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
8904
- }">
8905
- </ng-template>
8906
- }
8907
- @if (!noDataTemplate) {
8908
- <div>{{ messageFor('noDataText') }}</div>
8909
- }
8910
- </div>
8911
- }
8912
9275
  <!--footer template-->
8913
9276
  @if (footerTemplate) {
8914
9277
  <ng-template
@@ -9126,10 +9489,10 @@ class TagTemplateDirective {
9126
9489
  constructor(templateRef) {
9127
9490
  this.templateRef = templateRef;
9128
9491
  }
9129
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
9130
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: TagTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]", ngImport: i0 });
9492
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
9493
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: TagTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]", ngImport: i0 });
9131
9494
  }
9132
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TagTemplateDirective, decorators: [{
9495
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TagTemplateDirective, decorators: [{
9133
9496
  type: Directive,
9134
9497
  args: [{
9135
9498
  selector: '[kendoMultiSelectTagTemplate],[kendoMultiSelectTreeTagTemplate]',
@@ -9148,10 +9511,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
9148
9511
  *
9149
9512
  * @example
9150
9513
  * ```ts
9151
- * _@Component({
9514
+ * @Component({
9152
9515
  * selector: 'my-app',
9153
9516
  * template: `
9154
- * <kendo-multiselect kendoMultiSelectSummaryTag [data]="items">
9517
+ * <kendo-multiselect [summaryTagAfter]="1" [data]="items">
9155
9518
  * <ng-template kendoMultiSelectGroupTagTemplate let-dataItems>
9156
9519
  * <span>{{dataItems.length}} item(s) selected</span>
9157
9520
  * </ng-template>
@@ -9168,10 +9531,10 @@ class GroupTagTemplateDirective {
9168
9531
  constructor(templateRef) {
9169
9532
  this.templateRef = templateRef;
9170
9533
  }
9171
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GroupTagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
9172
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: GroupTagTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]", ngImport: i0 });
9534
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: GroupTagTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
9535
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: GroupTagTemplateDirective, isStandalone: true, selector: "[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]", ngImport: i0 });
9173
9536
  }
9174
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: GroupTagTemplateDirective, decorators: [{
9537
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: GroupTagTemplateDirective, decorators: [{
9175
9538
  type: Directive,
9176
9539
  args: [{
9177
9540
  selector: '[kendoMultiSelectGroupTagTemplate],[kendoMultiSelectTreeGroupTagTemplate]',
@@ -9229,6 +9592,7 @@ class TagListComponent {
9229
9592
  disabled;
9230
9593
  tagPrefix;
9231
9594
  id;
9595
+ ariaLabel;
9232
9596
  set size(size) {
9233
9597
  this.renderer.removeClass(this.hostElement.nativeElement, getSizeClass('chip-list', this.size));
9234
9598
  if (size) {
@@ -9251,7 +9615,11 @@ class TagListComponent {
9251
9615
  return this.id;
9252
9616
  }
9253
9617
  taglistRole = 'listbox';
9618
+ get hostAriaLabel() {
9619
+ return this.ariaLabel || null;
9620
+ }
9254
9621
  multiselectable = true;
9622
+ ariaOrientation = 'horizontal';
9255
9623
  _size;
9256
9624
  constructor(renderer, hostElement) {
9257
9625
  this.renderer = renderer;
@@ -9305,8 +9673,8 @@ class TagListComponent {
9305
9673
  return prop.find(item => item in tag);
9306
9674
  }
9307
9675
  }
9308
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
9309
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: TagListComponent, isStandalone: true, 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.hostClass", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable" } }, ngImport: i0, template: `
9676
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
9677
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: TagListComponent, isStandalone: true, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", ariaLabel: "ariaLabel", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClass", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-label": "this.hostAriaLabel", "attr.aria-multiselectable": "this.multiselectable", "attr.aria-orientation": "this.ariaOrientation" } }, ngImport: i0, template: `
9310
9678
  @for (tag of tags; track $index; let index = $index) {
9311
9679
  <div
9312
9680
  [attr.id]="itemId(tag, index)"
@@ -9332,7 +9700,7 @@ class TagListComponent {
9332
9700
  >
9333
9701
  <span class="k-chip-content">
9334
9702
  @if (isGroupTag(tag)) {
9335
- <span class="k-chip-label k-text-ellipsis">
9703
+ <span class="k-chip-label">
9336
9704
  @if (groupTemplate) {
9337
9705
  <ng-template
9338
9706
  [templateContext]="{
@@ -9346,7 +9714,7 @@ class TagListComponent {
9346
9714
  }
9347
9715
  </span>
9348
9716
  } @else {
9349
- <span class="k-chip-label k-text-ellipsis">
9717
+ <span class="k-chip-label">
9350
9718
  @if (template) {
9351
9719
  <ng-template
9352
9720
  [templateContext]="{
@@ -9362,11 +9730,13 @@ class TagListComponent {
9362
9730
  }
9363
9731
  </span>
9364
9732
  <span class="k-chip-actions">
9365
- <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
9733
+ <span class="k-chip-action k-chip-remove-action">
9366
9734
  <kendo-icon-wrapper
9735
+ [attr.aria-hidden]="index !== focused"
9367
9736
  (mousedown)="deleteTag($event, tag, index)"
9368
9737
  name="x-circle"
9369
9738
  [svgIcon]="xCircleIcon"
9739
+ size="small"
9370
9740
  >
9371
9741
  </kendo-icon-wrapper>
9372
9742
  </span>
@@ -9376,7 +9746,7 @@ class TagListComponent {
9376
9746
  <ng-content></ng-content>
9377
9747
  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
9378
9748
  }
9379
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: TagListComponent, decorators: [{
9749
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: TagListComponent, decorators: [{
9380
9750
  type: Component,
9381
9751
  args: [{
9382
9752
  selector: 'kendo-taglist',
@@ -9406,7 +9776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
9406
9776
  >
9407
9777
  <span class="k-chip-content">
9408
9778
  @if (isGroupTag(tag)) {
9409
- <span class="k-chip-label k-text-ellipsis">
9779
+ <span class="k-chip-label">
9410
9780
  @if (groupTemplate) {
9411
9781
  <ng-template
9412
9782
  [templateContext]="{
@@ -9420,7 +9790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
9420
9790
  }
9421
9791
  </span>
9422
9792
  } @else {
9423
- <span class="k-chip-label k-text-ellipsis">
9793
+ <span class="k-chip-label">
9424
9794
  @if (template) {
9425
9795
  <ng-template
9426
9796
  [templateContext]="{
@@ -9436,11 +9806,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
9436
9806
  }
9437
9807
  </span>
9438
9808
  <span class="k-chip-actions">
9439
- <span aria-label="delete" [attr.aria-hidden]="index !== focused" class="k-chip-action k-chip-remove-action">
9809
+ <span class="k-chip-action k-chip-remove-action">
9440
9810
  <kendo-icon-wrapper
9811
+ [attr.aria-hidden]="index !== focused"
9441
9812
  (mousedown)="deleteTag($event, tag, index)"
9442
9813
  name="x-circle"
9443
9814
  [svgIcon]="xCircleIcon"
9815
+ size="small"
9444
9816
  >
9445
9817
  </kendo-icon-wrapper>
9446
9818
  </span>
@@ -9472,6 +9844,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
9472
9844
  type: Input
9473
9845
  }], id: [{
9474
9846
  type: Input
9847
+ }], ariaLabel: [{
9848
+ type: Input
9475
9849
  }], size: [{
9476
9850
  type: Input
9477
9851
  }], rounded: [{
@@ -9491,9 +9865,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
9491
9865
  }], taglistRole: [{
9492
9866
  type: HostBinding,
9493
9867
  args: ['attr.role']
9868
+ }], hostAriaLabel: [{
9869
+ type: HostBinding,
9870
+ args: ['attr.aria-label']
9494
9871
  }], multiselectable: [{
9495
9872
  type: HostBinding,
9496
9873
  args: ['attr.aria-multiselectable']
9874
+ }], ariaOrientation: [{
9875
+ type: HostBinding,
9876
+ args: ['attr.aria-orientation']
9497
9877
  }] } });
9498
9878
 
9499
9879
  const MULTISELECT_VALUE_ACCESSOR = {
@@ -9560,6 +9940,8 @@ class MultiSelectComponent {
9560
9940
  popupRef;
9561
9941
  text;
9562
9942
  tags;
9943
+ isAllSelected = false;
9944
+ isPartiallySelected = false;
9563
9945
  focusedTagIndex = undefined;
9564
9946
  /**
9565
9947
  * @hidden
@@ -9581,7 +9963,7 @@ class MultiSelectComponent {
9581
9963
  * @hidden
9582
9964
  */
9583
9965
  get ariaControls() {
9584
- return this.isOpen ? this.listBoxId : undefined;
9966
+ return (!this.isAdaptive && this.isOpen) ? this.listBoxId : undefined;
9585
9967
  }
9586
9968
  /**
9587
9969
  * @hidden
@@ -9598,12 +9980,12 @@ class MultiSelectComponent {
9598
9980
  }
9599
9981
  /**
9600
9982
  * Focuses a specific item in the MultiSelect based on the provided index.
9601
- * Sets the index to `-1` to focus the custom item if available.
9983
+ * Sets the index to `-1` to focus the custom item if available, or `-2` to focus the Select All item.
9602
9984
  * Pass `null` or an invalid index to remove focus.
9603
9985
  */
9604
9986
  focusItemAt(index) {
9605
- const minIndex = this.allowCustom ? -1 : 0;
9606
- const isInRange = minIndex <= 0 && index < this.data.length;
9987
+ const minIndex = this.selectAll ? -2 : this.allowCustom ? -1 : 0;
9988
+ const isInRange = minIndex <= index && index < this.data.length;
9607
9989
  if (isPresent(index) && isInRange && !this.disabledItemsService.isIndexDisabled(index)) {
9608
9990
  this.selectionService.focus(index);
9609
9991
  }
@@ -9619,6 +10001,31 @@ class MultiSelectComponent {
9619
10001
  this.searchbar.focus();
9620
10002
  }
9621
10003
  }
10004
+ /**
10005
+ * @hidden
10006
+ */
10007
+ handleSelectAllStateChange(checkBoxState) {
10008
+ const availableItems = this.availableItemsForSelectAll;
10009
+ let newValue;
10010
+ if (checkBoxState === true) {
10011
+ const toAdd = availableItems.filter(item => !this.isItemSelected(item));
10012
+ newValue = [...this.value, ...toAdd];
10013
+ }
10014
+ else if (checkBoxState === false) {
10015
+ newValue = this.value.filter(v => !availableItems.some(item => getter(item, this.valueField) === getter(v, this.valueField)));
10016
+ }
10017
+ else {
10018
+ return;
10019
+ }
10020
+ this.preserveFocusIndex = -2;
10021
+ this.value = newValue;
10022
+ this.isAllSelected = this.isAllSelectedComputed;
10023
+ this.isPartiallySelected = this.isPartiallySelectedComputed;
10024
+ this.emitValueChange();
10025
+ this.cdr.markForCheck();
10026
+ const state = this.isAllSelected ? 'checked' : this.isPartiallySelected ? 'indeterminate' : 'unchecked';
10027
+ this.selectAllChange.emit(state);
10028
+ }
9622
10029
  /**
9623
10030
  * @hidden
9624
10031
  */
@@ -9724,6 +10131,22 @@ class MultiSelectComponent {
9724
10131
  * By default the sticky header is displayed ([see example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/grouping#sticky-header)).
9725
10132
  */
9726
10133
  showStickyHeader = true;
10134
+ /**
10135
+ * Renders a Select All sticky header item at the top of the popup list.
10136
+ * Clicking it selects or deselects all currently available items and triggers the `valueChange` event.
10137
+ *
10138
+ * @default false
10139
+ */
10140
+ selectAll = false;
10141
+ /**
10142
+ * Sets the number of selected items after which a summary chip replaces the remaining individual chips.
10143
+ * Set to `0` to always show a single summary chip.
10144
+ * Pass `null` to disable summarization.
10145
+ * When `selectAll` is enabled and this input is not explicitly set, defaults to `10`.
10146
+ *
10147
+ * @default null
10148
+ */
10149
+ summaryTagAfter;
9727
10150
  /**
9728
10151
  * @hidden
9729
10152
  */
@@ -10068,6 +10491,11 @@ class MultiSelectComponent {
10068
10491
  * You can prevent tag removal by calling `preventDefault()` on the event.
10069
10492
  */
10070
10493
  removeTag = new EventEmitter();
10494
+ /**
10495
+ * Emitted when the Select All item state changes.
10496
+ * Useful for virtualization scenarios where the consumer manages the full dataset.
10497
+ */
10498
+ selectAllChange = new EventEmitter();
10071
10499
  container;
10072
10500
  searchbar;
10073
10501
  tagList;
@@ -10141,6 +10569,33 @@ class MultiSelectComponent {
10141
10569
  _fillMode;
10142
10570
  _valueHolder = [];
10143
10571
  isCustomValueSelected = false;
10572
+ preserveFocusIndex = null;
10573
+ get isAllSelectedComputed() {
10574
+ const availableItems = this.availableItemsForSelectAll;
10575
+ if (availableItems.length === 0) {
10576
+ return false;
10577
+ }
10578
+ const allItemsSelected = availableItems.every(item => this.isItemSelected(item));
10579
+ return allItemsSelected;
10580
+ }
10581
+ get isPartiallySelectedComputed() {
10582
+ if (this.isAllSelected) {
10583
+ return false;
10584
+ }
10585
+ const availableItems = this.availableItemsForSelectAll;
10586
+ const hasPartialSelection = availableItems.some(item => this.isItemSelected(item));
10587
+ return hasPartialSelection;
10588
+ }
10589
+ get hasCustomValueItem() {
10590
+ return this.allowCustom && !!this.text;
10591
+ }
10592
+ get availableItemsForSelectAll() {
10593
+ const pageData = this.data;
10594
+ const data = this.dataService.grouped
10595
+ ? pageData.filter(item => !item.header).map(item => item.value)
10596
+ : pageData;
10597
+ return data;
10598
+ }
10144
10599
  constructor(wrapper, localization, popupService, dataService, selectionService, navigationService, disabledItemsService, cdr, differs, renderer, _zone, injector, adaptiveService) {
10145
10600
  this.wrapper = wrapper;
10146
10601
  this.localization = localization;
@@ -10244,6 +10699,7 @@ class MultiSelectComponent {
10244
10699
  * @hidden
10245
10700
  */
10246
10701
  change(event) {
10702
+ this.preserveFocusIndex = null;
10247
10703
  if (event.isMultipleSelection) {
10248
10704
  // Existing items.
10249
10705
  if (isPresent(event.added) && event.added.length > 0) {
@@ -10315,14 +10771,17 @@ class MultiSelectComponent {
10315
10771
  const data = this.getDataItems();
10316
10772
  const selection = selectedIndices(this.value, data, this.valueField);
10317
10773
  this.selectionService.resetSelection(selection);
10318
- if (this.disabledItemsService.isIndexDisabled(this.selectionService.focused)) {
10774
+ if (this.preserveFocusIndex !== null) {
10775
+ this.selectionService.focused = this.preserveFocusIndex;
10776
+ }
10777
+ else if (this.disabledItemsService.isIndexDisabled(this.selectionService.focused)) {
10319
10778
  this.selectionService.focused = this.firstFocusableIndex(0);
10320
10779
  }
10321
10780
  if (this.isOpen && this.selectionService.focused === undefined) {
10322
10781
  if (this.dataService.itemsCount > 0) {
10323
10782
  this.selectionService.focused = this.firstFocusableIndex(0);
10324
- if (this.allowCustom) {
10325
- this.selectionService.focused = 0;
10783
+ if (this.hasCustomValueItem) {
10784
+ this.selectionService.focused = -1;
10326
10785
  }
10327
10786
  }
10328
10787
  else if (this.allowCustom) {
@@ -10343,8 +10802,9 @@ class MultiSelectComponent {
10343
10802
  })
10344
10803
  .filter(dataItem => isPresent(dataItem));
10345
10804
  }
10346
- this.tags = this.tagMapper(this.selectedDataItems.slice(0));
10805
+ this.tags = this.buildTags(this.selectedDataItems.slice(0));
10347
10806
  this.disabledIndices = this.disabledItemsMapper();
10807
+ this.updateSelectAllState();
10348
10808
  this.cdr.markForCheck();
10349
10809
  }
10350
10810
  /**
@@ -10365,6 +10825,9 @@ class MultiSelectComponent {
10365
10825
  else {
10366
10826
  this.searchTextAndFocus(text);
10367
10827
  }
10828
+ if (this.selectAll && this.allowCustom && text) {
10829
+ this.selectionService.focused = -1;
10830
+ }
10368
10831
  this.searchbar.setInputSize();
10369
10832
  }
10370
10833
  /**
@@ -10373,6 +10836,7 @@ class MultiSelectComponent {
10373
10836
  pageChange(event) {
10374
10837
  const virtual = this.virtual;
10375
10838
  virtual.skip = event.skip;
10839
+ this.updateSelectAllState();
10376
10840
  }
10377
10841
  /**
10378
10842
  * @hidden
@@ -10411,7 +10875,7 @@ class MultiSelectComponent {
10411
10875
  const action = this.navigationService.process({
10412
10876
  current: focused,
10413
10877
  max: this.dataService.itemsCount - 1,
10414
- min: this.allowCustom && this.text ? -1 : 0,
10878
+ min: this.selectAll ? -2 : (this.hasCustomValueItem ? -1 : 0),
10415
10879
  open: this.isOpen,
10416
10880
  originalEvent: eventData
10417
10881
  });
@@ -10499,7 +10963,10 @@ class MultiSelectComponent {
10499
10963
  if (isChanged('valueNormalizer', changes)) {
10500
10964
  this.createCustomValueStream();
10501
10965
  }
10502
- if (anyChanged(['textField', 'valueField', 'valuePrimitive'], changes)) {
10966
+ if (anyChanged(['selectAll', 'summaryTagAfter'], changes, false)) {
10967
+ this.refreshSummaryTagMapper();
10968
+ }
10969
+ if (anyChanged(['textField', 'valueField', 'valuePrimitive', 'selectAll', 'summaryTagAfter'], changes)) {
10503
10970
  this.setState(this.value);
10504
10971
  }
10505
10972
  }
@@ -10583,13 +11050,6 @@ class MultiSelectComponent {
10583
11050
  this.cdr.markForCheck();
10584
11051
  this.disabled = isDisabled;
10585
11052
  }
10586
- /**
10587
- * @hidden
10588
- */
10589
- onTagMapperChange() {
10590
- this.tags = this.tagMapper(this.selectedDataItems.slice(0));
10591
- this.cdr.markForCheck();
10592
- }
10593
11053
  /**
10594
11054
  * @hidden
10595
11055
  */
@@ -10776,7 +11236,7 @@ class MultiSelectComponent {
10776
11236
  const itemIndex = this.dataService.indexOf(newValue);
10777
11237
  const customItem = itemIndex === -1;
10778
11238
  if (this.value.indexOf(newValue) === -1) {
10779
- !this.isActionSheetExpanded && (this.tags = this.tagMapper([...this.selectedDataItems, normalizedValue]));
11239
+ !this.isActionSheetExpanded && (this.tags = this.buildTags([...this.selectedDataItems, normalizedValue]));
10780
11240
  if (!customItem) {
10781
11241
  this.selectionService.add(itemIndex);
10782
11242
  }
@@ -10867,6 +11327,13 @@ class MultiSelectComponent {
10867
11327
  if (this.isOpen) {
10868
11328
  event.originalEvent.preventDefault();
10869
11329
  }
11330
+ if (focusedIndex === -2) {
11331
+ if (this.selectAll && this.data.length > 0) {
11332
+ const newState = !this.isAllSelected;
11333
+ this.handleSelectAllStateChange(newState);
11334
+ }
11335
+ return;
11336
+ }
10870
11337
  if (focusedIndex === -1) {
10871
11338
  if (this.allowCustom && this.text) {
10872
11339
  this.addCustomValue(this.text);
@@ -10977,7 +11444,8 @@ class MultiSelectComponent {
10977
11444
  this.nextTick(() => this.selectionService.focus(indexToSelect));
10978
11445
  }
10979
11446
  handleUp(index) {
10980
- this.selectionService.focused = index;
11447
+ this.preserveFocusIndex = null;
11448
+ this.selectionService.focused = this.calculateNavigationIndex(index);
10981
11449
  }
10982
11450
  handleBackspace() {
10983
11451
  if (this.focusedTagIndex !== undefined) {
@@ -11003,13 +11471,24 @@ class MultiSelectComponent {
11003
11471
  }
11004
11472
  }
11005
11473
  handleDownKey(index) {
11474
+ this.preserveFocusIndex = null;
11006
11475
  if (this.isOpen) {
11476
+ index = this.calculateNavigationIndex(index);
11007
11477
  this.selectionService.focused = index || this.firstFocusableIndex(0);
11008
11478
  }
11009
11479
  else {
11010
11480
  this.openPopup();
11011
11481
  }
11012
11482
  }
11483
+ calculateNavigationIndex(index) {
11484
+ if (index === 0 && !isPresent(this.selectionService.focused)) {
11485
+ return this.hasCustomValueItem ? -1 : (this.selectAll ? -2 : 0);
11486
+ }
11487
+ if (index === -1 && !this.hasCustomValueItem) {
11488
+ return this.selectionService.focused < index ? 0 : (this.selectAll ? -2 : 0);
11489
+ }
11490
+ return index;
11491
+ }
11013
11492
  handleRightKey() {
11014
11493
  const last = this.tags.length - 1;
11015
11494
  if (this.focusedTagIndex === last) {
@@ -11149,6 +11628,71 @@ class MultiSelectComponent {
11149
11628
  this.togglePopup(false);
11150
11629
  });
11151
11630
  }
11631
+ buildTags(items) {
11632
+ if (this.allowCustom && this.selectAll && this.valueField) {
11633
+ const data = this.getDataItems();
11634
+ const dataItemValues = new Set(data.map(item => getter(item, this.valueField)));
11635
+ const listItems = [];
11636
+ const customItems = [];
11637
+ items.forEach(item => {
11638
+ const itemValue = getter(item, this.valueField);
11639
+ if (dataItemValues.has(itemValue)) {
11640
+ listItems.push(item);
11641
+ }
11642
+ else {
11643
+ customItems.push(item);
11644
+ }
11645
+ });
11646
+ const hasExplicitSummaryTagAfter = this.summaryTagAfter !== undefined;
11647
+ const totalItems = listItems.length + customItems.length;
11648
+ const result = [];
11649
+ const effectiveSummaryAfter = hasExplicitSummaryTagAfter ? this.summaryTagAfter : (this.selectAll ? 10 : null);
11650
+ const shouldCreateSummaryTag = listItems.length > 0 &&
11651
+ (effectiveSummaryAfter !== null && totalItems > effectiveSummaryAfter);
11652
+ if (shouldCreateSummaryTag) {
11653
+ result.push(listItems);
11654
+ customItems.forEach(item => {
11655
+ result.push(item);
11656
+ });
11657
+ }
11658
+ else {
11659
+ if (listItems.length > 0) {
11660
+ listItems.forEach(item => {
11661
+ result.push(item);
11662
+ });
11663
+ }
11664
+ customItems.forEach(item => {
11665
+ result.push(item);
11666
+ });
11667
+ if (effectiveSummaryAfter !== null && result.length > effectiveSummaryAfter) {
11668
+ const summarized = result.slice(0, effectiveSummaryAfter);
11669
+ summarized.push(result.slice(effectiveSummaryAfter));
11670
+ return summarized;
11671
+ }
11672
+ }
11673
+ return result;
11674
+ }
11675
+ return this.tagMapper(items);
11676
+ }
11677
+ refreshSummaryTagMapper() {
11678
+ const effectiveSummaryAfter = this.summaryTagAfter !== undefined
11679
+ ? this.summaryTagAfter
11680
+ : (this.selectAll ? 10 : null);
11681
+ if (effectiveSummaryAfter !== null) {
11682
+ const showAfter = effectiveSummaryAfter;
11683
+ this.tagMapper = (tags) => {
11684
+ if (tags.length > showAfter) {
11685
+ const result = tags.slice(0, showAfter);
11686
+ result.push(tags.slice(showAfter, tags.length));
11687
+ return result;
11688
+ }
11689
+ return tags.slice ? tags.slice() : tags;
11690
+ };
11691
+ }
11692
+ else {
11693
+ this.tagMapper = (tags) => tags || [];
11694
+ }
11695
+ }
11152
11696
  emitValueChange() {
11153
11697
  this.onChangeCallback(this.value);
11154
11698
  this.valueChange.emit(this.value);
@@ -11236,8 +11780,17 @@ class MultiSelectComponent {
11236
11780
  this.closePopup();
11237
11781
  }
11238
11782
  }
11239
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
11240
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
11783
+ isItemSelected(item) {
11784
+ return this.value.some(v => getter(v, this.valueField) === getter(item, this.valueField));
11785
+ }
11786
+ updateSelectAllState() {
11787
+ if (this.selectAll) {
11788
+ this.isAllSelected = this.isAllSelectedComputed;
11789
+ this.isPartiallySelected = this.isPartiallySelectedComputed;
11790
+ }
11791
+ }
11792
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
11793
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: MultiSelectComponent, isStandalone: true, selector: "kendo-multiselect", inputs: { showStickyHeader: "showStickyHeader", selectAll: "selectAll", summaryTagAfter: "summaryTagAfter", focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer", inputAttributes: "inputAttributes" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", inputFocus: "inputFocus", inputBlur: "inputBlur", removeTag: "removeTag", selectAllChange: "selectAllChange" }, host: { properties: { "class.k-readonly": "this.readonly", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
11241
11794
  MULTISELECT_VALUE_ACCESSOR,
11242
11795
  DataService,
11243
11796
  SelectionService,
@@ -11265,6 +11818,9 @@ class MultiSelectComponent {
11265
11818
  i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
11266
11819
  clearTitle="clear"
11267
11820
 
11821
+ i18n-chipListLabel="kendo.multiselect.chipListLabel|The accessible label of the tag list element that contains the selected items"
11822
+ chipListLabel="chip list"
11823
+
11268
11824
  i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
11269
11825
  popupLabel="Options list"
11270
11826
 
@@ -11272,7 +11828,13 @@ class MultiSelectComponent {
11272
11828
  adaptiveCloseButtonTitle="Close"
11273
11829
 
11274
11830
  i18n-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
11275
- useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
11831
+ useCustomValueText="Use &quot;[[customValue]]&quot;"
11832
+
11833
+ i18n-listboxLabel="kendo.multiselect.listboxLabel|The accessible label of the listbox that contains the list of options"
11834
+ listboxLabel="Options"
11835
+
11836
+ i18n-selectAllText="kendo.multiselect.selectAllText|The text of the Select All item in the popup"
11837
+ selectAllText="Select All"
11276
11838
  >
11277
11839
  </ng-container>
11278
11840
 
@@ -11307,17 +11869,18 @@ class MultiSelectComponent {
11307
11869
  [groupTemplate]="groupTagTemplate"
11308
11870
  [tagPrefix]="tagPrefix"
11309
11871
  [disabledIndices]="disabledIndices"
11872
+ [ariaLabel]="messageFor('chipListLabel')"
11310
11873
  (removeTag)="handleRemoveTag($event)"
11311
11874
  >
11312
11875
  </kendo-taglist>
11313
11876
  <input
11314
11877
  kendoSearchbar
11315
11878
  [ariaControls]="ariaControls"
11316
- [ariaExpanded]="isOpen"
11879
+ [ariaExpanded]="isAdaptive ? false : isOpen"
11317
11880
  [id]="focusableId"
11318
11881
  [tagListId]="tagListId"
11319
11882
  [isLoading]="loading"
11320
- [isFilterable]="filterable"
11883
+ [hasListAutocomplete]="filterable"
11321
11884
  [activeDescendant]="activeDescendant"
11322
11885
  [userInput]="text"
11323
11886
  [disabled]="disabled"
@@ -11344,7 +11907,6 @@ class MultiSelectComponent {
11344
11907
  (mousedown)="clearAll($event)"
11345
11908
  >
11346
11909
  <kendo-icon-wrapper
11347
- class="k-icon"
11348
11910
  name="x"
11349
11911
  [svgIcon]="xIcon"
11350
11912
  >
@@ -11419,26 +11981,32 @@ class MultiSelectComponent {
11419
11981
  [isMultiselect]="true"
11420
11982
  [isActionSheetExpanded]="isActionSheetExpanded"
11421
11983
  [showStickyHeader]="showStickyHeader"
11984
+ [selectAll]="selectAll && data.length > 0"
11985
+ [selectAllText]="messageFor('selectAllText')"
11986
+ [isAllSelected]="isAllSelected"
11987
+ [isPartiallySelected]="isPartiallySelected"
11988
+ (selectAllClick)="handleSelectAllStateChange($event)"
11422
11989
  [customItemTemplate]="customItemTemplate"
11423
11990
  [text]="text"
11424
11991
  [allowCustom]="allowCustom"
11992
+ [ariaLabel]="messageFor('listboxLabel')"
11425
11993
  >
11994
+ <!--no data template-->
11995
+ @if (data.length === 0) {
11996
+ <div class="k-no-data" [attr.aria-live]="'polite'">
11997
+ @if (noDataTemplate) {
11998
+ <ng-template
11999
+ [templateContext]="{
12000
+ templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
12001
+ }">
12002
+ </ng-template>
12003
+ }
12004
+ @if (!noDataTemplate) {
12005
+ <div>{{ messageFor('noDataText') }}</div>
12006
+ }
12007
+ </div>
12008
+ }
11426
12009
  </kendo-list>
11427
- <!--no data template-->
11428
- @if (data.length === 0) {
11429
- <div class="k-no-data" [attr.aria-live]="'polite'">
11430
- @if (noDataTemplate) {
11431
- <ng-template
11432
- [templateContext]="{
11433
- templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
11434
- }">
11435
- </ng-template>
11436
- }
11437
- @if (!noDataTemplate) {
11438
- <div>{{ messageFor('noDataText') }}</div>
11439
- }
11440
- </div>
11441
- }
11442
12010
  <!--footer template-->
11443
12011
  @if (footerTemplate) {
11444
12012
  <ng-template
@@ -11448,9 +12016,9 @@ class MultiSelectComponent {
11448
12016
  </ng-template>
11449
12017
  }
11450
12018
  </ng-template>
11451
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
12019
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "ariaLabel", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
11452
12020
  }
11453
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectComponent, decorators: [{
12021
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectComponent, decorators: [{
11454
12022
  type: Component,
11455
12023
  args: [{
11456
12024
  exportAs: 'kendoMultiSelect',
@@ -11484,6 +12052,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
11484
12052
  i18n-clearTitle="kendo.multiselect.clearTitle|The title of the clear button"
11485
12053
  clearTitle="clear"
11486
12054
 
12055
+ i18n-chipListLabel="kendo.multiselect.chipListLabel|The accessible label of the tag list element that contains the selected items"
12056
+ chipListLabel="chip list"
12057
+
11487
12058
  i18n-popupLabel="kendo.multiselect.popupLabel|The label of the popup element that contains the list of options when its role is 'region'"
11488
12059
  popupLabel="Options list"
11489
12060
 
@@ -11491,7 +12062,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
11491
12062
  adaptiveCloseButtonTitle="Close"
11492
12063
 
11493
12064
  i18n-useCustomValueText="kendo.multiselect.useCustomValueText|The text displayed when the user types a custom value that is not in the list of options."
11494
- useCustomValueText="{{ 'Use &quot;{customValue}&quot;' }}"
12065
+ useCustomValueText="Use &quot;[[customValue]]&quot;"
12066
+
12067
+ i18n-listboxLabel="kendo.multiselect.listboxLabel|The accessible label of the listbox that contains the list of options"
12068
+ listboxLabel="Options"
12069
+
12070
+ i18n-selectAllText="kendo.multiselect.selectAllText|The text of the Select All item in the popup"
12071
+ selectAllText="Select All"
11495
12072
  >
11496
12073
  </ng-container>
11497
12074
 
@@ -11526,17 +12103,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
11526
12103
  [groupTemplate]="groupTagTemplate"
11527
12104
  [tagPrefix]="tagPrefix"
11528
12105
  [disabledIndices]="disabledIndices"
12106
+ [ariaLabel]="messageFor('chipListLabel')"
11529
12107
  (removeTag)="handleRemoveTag($event)"
11530
12108
  >
11531
12109
  </kendo-taglist>
11532
12110
  <input
11533
12111
  kendoSearchbar
11534
12112
  [ariaControls]="ariaControls"
11535
- [ariaExpanded]="isOpen"
12113
+ [ariaExpanded]="isAdaptive ? false : isOpen"
11536
12114
  [id]="focusableId"
11537
12115
  [tagListId]="tagListId"
11538
12116
  [isLoading]="loading"
11539
- [isFilterable]="filterable"
12117
+ [hasListAutocomplete]="filterable"
11540
12118
  [activeDescendant]="activeDescendant"
11541
12119
  [userInput]="text"
11542
12120
  [disabled]="disabled"
@@ -11563,7 +12141,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
11563
12141
  (mousedown)="clearAll($event)"
11564
12142
  >
11565
12143
  <kendo-icon-wrapper
11566
- class="k-icon"
11567
12144
  name="x"
11568
12145
  [svgIcon]="xIcon"
11569
12146
  >
@@ -11638,26 +12215,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
11638
12215
  [isMultiselect]="true"
11639
12216
  [isActionSheetExpanded]="isActionSheetExpanded"
11640
12217
  [showStickyHeader]="showStickyHeader"
12218
+ [selectAll]="selectAll && data.length > 0"
12219
+ [selectAllText]="messageFor('selectAllText')"
12220
+ [isAllSelected]="isAllSelected"
12221
+ [isPartiallySelected]="isPartiallySelected"
12222
+ (selectAllClick)="handleSelectAllStateChange($event)"
11641
12223
  [customItemTemplate]="customItemTemplate"
11642
12224
  [text]="text"
11643
12225
  [allowCustom]="allowCustom"
12226
+ [ariaLabel]="messageFor('listboxLabel')"
11644
12227
  >
12228
+ <!--no data template-->
12229
+ @if (data.length === 0) {
12230
+ <div class="k-no-data" [attr.aria-live]="'polite'">
12231
+ @if (noDataTemplate) {
12232
+ <ng-template
12233
+ [templateContext]="{
12234
+ templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
12235
+ }">
12236
+ </ng-template>
12237
+ }
12238
+ @if (!noDataTemplate) {
12239
+ <div>{{ messageFor('noDataText') }}</div>
12240
+ }
12241
+ </div>
12242
+ }
11645
12243
  </kendo-list>
11646
- <!--no data template-->
11647
- @if (data.length === 0) {
11648
- <div class="k-no-data" [attr.aria-live]="'polite'">
11649
- @if (noDataTemplate) {
11650
- <ng-template
11651
- [templateContext]="{
11652
- templateRef: noDataTemplate ? noDataTemplate.templateRef : undefined
11653
- }">
11654
- </ng-template>
11655
- }
11656
- @if (!noDataTemplate) {
11657
- <div>{{ messageFor('noDataText') }}</div>
11658
- }
11659
- </div>
11660
- }
11661
12244
  <!--footer template-->
11662
12245
  @if (footerTemplate) {
11663
12246
  <ng-template
@@ -11676,6 +12259,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
11676
12259
  args: [AdaptiveRendererComponent]
11677
12260
  }], showStickyHeader: [{
11678
12261
  type: Input
12262
+ }], selectAll: [{
12263
+ type: Input
12264
+ }], summaryTagAfter: [{
12265
+ type: Input
11679
12266
  }], focusableId: [{
11680
12267
  type: Input
11681
12268
  }], autoClose: [{
@@ -11764,6 +12351,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
11764
12351
  type: Output
11765
12352
  }], removeTag: [{
11766
12353
  type: Output
12354
+ }], selectAllChange: [{
12355
+ type: Output
11767
12356
  }], container: [{
11768
12357
  type: ViewChild,
11769
12358
  args: ['container', { read: ViewContainerRef, static: true }]
@@ -11849,10 +12438,10 @@ class ColumnCellTemplateDirective {
11849
12438
  constructor(templateRef) {
11850
12439
  this.templateRef = templateRef;
11851
12440
  }
11852
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColumnCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
11853
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ColumnCellTemplateDirective, isStandalone: true, selector: "[kendoMultiColumnComboBoxColumnCellTemplate]", ngImport: i0 });
12441
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ColumnCellTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
12442
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ColumnCellTemplateDirective, isStandalone: true, selector: "[kendoMultiColumnComboBoxColumnCellTemplate]", ngImport: i0 });
11854
12443
  }
11855
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColumnCellTemplateDirective, decorators: [{
12444
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ColumnCellTemplateDirective, decorators: [{
11856
12445
  type: Directive,
11857
12446
  args: [{
11858
12447
  selector: '[kendoMultiColumnComboBoxColumnCellTemplate]',
@@ -11884,10 +12473,10 @@ class ColumnHeaderTemplateDirective {
11884
12473
  constructor(templateRef) {
11885
12474
  this.templateRef = templateRef;
11886
12475
  }
11887
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColumnHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
11888
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: ColumnHeaderTemplateDirective, isStandalone: true, selector: "[kendoMultiColumnComboBoxColumnHeaderTemplate]", ngImport: i0 });
12476
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ColumnHeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
12477
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: ColumnHeaderTemplateDirective, isStandalone: true, selector: "[kendoMultiColumnComboBoxColumnHeaderTemplate]", ngImport: i0 });
11889
12478
  }
11890
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ColumnHeaderTemplateDirective, decorators: [{
12479
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ColumnHeaderTemplateDirective, decorators: [{
11891
12480
  type: Directive,
11892
12481
  args: [{
11893
12482
  selector: '[kendoMultiColumnComboBoxColumnHeaderTemplate]',
@@ -11968,10 +12557,10 @@ class ComboBoxColumnComponent {
11968
12557
  * @hidden
11969
12558
  */
11970
12559
  matchesMedia = true;
11971
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComboBoxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11972
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: ComboBoxColumnComponent, isStandalone: true, selector: "kendo-combobox-column", inputs: { field: "field", title: "title", width: "width", hidden: "hidden", style: "style", headerStyle: "headerStyle", class: "class", headerClass: "headerClass", media: "media" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ColumnCellTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ColumnHeaderTemplateDirective, descendants: true }], ngImport: i0, template: '', isInline: true });
12560
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12561
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: ComboBoxColumnComponent, isStandalone: true, selector: "kendo-combobox-column", inputs: { field: "field", title: "title", width: "width", hidden: "hidden", style: "style", headerStyle: "headerStyle", class: "class", headerClass: "headerClass", media: "media" }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ColumnCellTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ColumnHeaderTemplateDirective, descendants: true }], ngImport: i0, template: '', isInline: true });
11973
12562
  }
11974
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComboBoxColumnComponent, decorators: [{
12563
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxColumnComponent, decorators: [{
11975
12564
  type: Component,
11976
12565
  args: [{
11977
12566
  selector: 'kendo-combobox-column',
@@ -12113,6 +12702,17 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12113
12702
  * @hidden
12114
12703
  */
12115
12704
  totalColumnsWidth;
12705
+ /**
12706
+ * @hidden
12707
+ */
12708
+ get visibleColumnsWidths() {
12709
+ return this.columns.reduce((widths, column, index) => {
12710
+ if (!column.hidden && column.matchesMedia) {
12711
+ widths.push(this.getColumnWidth(index));
12712
+ }
12713
+ return widths;
12714
+ }, []);
12715
+ }
12116
12716
  get popupWidth() {
12117
12717
  const wrapperOffsetWidth = this.wrapper.nativeElement.offsetWidth;
12118
12718
  const min = `${wrapperOffsetWidth}px`;
@@ -12127,7 +12727,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12127
12727
  * @hidden
12128
12728
  */
12129
12729
  get tableSizeClass() {
12130
- return `${this.size ? getSizeClass('table', this.size) : ''}`;
12730
+ const effectiveSize = this.isAdaptive ? 'large' : this.size;
12731
+ return `${effectiveSize ? getSizeClass('table', effectiveSize) : ''}`;
12131
12732
  }
12132
12733
  /**
12133
12734
  * @hidden
@@ -12246,8 +12847,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12246
12847
  }
12247
12848
  return this.headerTable?.nativeElement.offsetWidth;
12248
12849
  }
12249
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
12250
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiColumnComboBoxComponent, isStandalone: true, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
12850
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiColumnComboBoxComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: DataService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
12851
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: MultiColumnComboBoxComponent, isStandalone: true, selector: "kendo-multicolumncombobox", host: { properties: { "class.k-dropdowngrid": "this.hostClasses", "class.k-disabled": "this.isDisabled" } }, providers: [
12251
12852
  SelectionService,
12252
12853
  DataService,
12253
12854
  NavigationService,
@@ -12296,6 +12897,8 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12296
12897
  popupLabel="Options list"
12297
12898
  i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
12298
12899
  adaptiveCloseButtonTitle="Close"
12900
+ i18n-listboxLabel="kendo.multicolumncombobox.listboxLabel|The accessible label of the listbox that contains the list of options"
12901
+ listboxLabel="Options"
12299
12902
  ></ng-container>
12300
12903
 
12301
12904
  <ng-container
@@ -12317,11 +12920,11 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12317
12920
  <input
12318
12921
  kendoSearchbar
12319
12922
  [ariaControls]="ariaControls"
12320
- [ariaExpanded]="isOpen"
12923
+ [ariaExpanded]="isAdaptive ? false : isOpen"
12321
12924
  [id]="focusableId"
12322
12925
  [isLoading]="loading"
12323
12926
  [isSuggestable]="suggest"
12324
- [isFilterable]="filterable"
12927
+ [hasListAutocomplete]="filterable"
12325
12928
  [activeDescendant]="activeDescendant"
12326
12929
  [userInput]="text"
12327
12930
  [suggestedText]="getSuggestion()"
@@ -12425,7 +13028,7 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12425
13028
  <!--grid header-->
12426
13029
  <div #header class="k-table-header">
12427
13030
  <div #headerWrap class="k-table-header-wrap">
12428
- <table #headerTable class="k-table" role="presentation">
13031
+ <table #headerTable class="k-table">
12429
13032
  <colgroup>
12430
13033
  @for (column of columns; track column) {
12431
13034
  @if (!column.hidden && column.matchesMedia) {
@@ -12509,7 +13112,9 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12509
13112
  [virtual]="virtual"
12510
13113
  [type]="'dropdowngrid'"
12511
13114
  [rowWidth]="rowWidth"
13115
+ [columnsWidths]="visibleColumnsWidths"
12512
13116
  [showStickyHeader]="showStickyHeader"
13117
+ [ariaLabel]="messageFor('listboxLabel')"
12513
13118
  (pageChange)="pageChange($event)"
12514
13119
  (listResize)="updateHeaderPadding(header)"
12515
13120
  (popupListScroll)="headerWrap.scrollLeft = $event.target.scrollLeft;"
@@ -12536,27 +13141,21 @@ class MultiColumnComboBoxComponent extends ComboBoxComponent {
12536
13141
  <!--user-defined footer template-->
12537
13142
  @if (footerTemplate) {
12538
13143
  <div class="k-table-footer">
12539
- <table class="k-table">
12540
- <tfoot class="k-table-tfoot">
12541
- <tr class="k-table-row">
12542
- <td class="k-table-td">
12543
- <ng-template
13144
+ <span class="k-table-td">
13145
+ <ng-template
12544
13146
  [templateContext]="{
12545
13147
  templateRef: footerTemplate.templateRef
12546
13148
  }"
12547
- >
12548
- </ng-template>
12549
- </td>
12550
- </tr>
12551
- </tfoot>
12552
- </table>
13149
+ >
13150
+ </ng-template>
13151
+ </span>
12553
13152
  </div>
12554
13153
  }
12555
13154
  </div>
12556
13155
  </ng-template>
12557
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "customItemTemplate", "text", "allowCustom", "defaultItem", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }] });
13156
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "component", type: SearchBarComponent, selector: "input[kendoSearchbar]", inputs: ["tagListId", "readonly", "disabled", "isRequired", "isSuggestable", "hasListAutocomplete", "userInput", "suggestedText", "inputAttributes", "id", "activeDescendant", "tabIndex", "isLoading", "ariaControls", "ariaExpanded", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListComponent, selector: "kendo-list", inputs: ["selected", "focused", "textField", "valueField", "height", "template", "groupTemplate", "fixedGroupTemplate", "show", "id", "optionPrefix", "multipleSelection", "virtual", "type", "checkboxes", "ariaLive", "ariaLabel", "isMultiselect", "isActionSheetExpanded", "showStickyHeader", "rowWidth", "columnsWidths", "customItemTemplate", "text", "allowCustom", "defaultItem", "selectAll", "selectAllText", "isAllSelected", "isPartiallySelected", "data", "size", "rounded"], outputs: ["selectAllClick", "onClick", "pageChange", "listResize", "popupListScroll"] }] });
12558
13157
  }
12559
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
13158
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
12560
13159
  type: Component,
12561
13160
  args: [{
12562
13161
  providers: [
@@ -12610,6 +13209,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
12610
13209
  popupLabel="Options list"
12611
13210
  i18n-adaptiveCloseButtonTitle="kendo.multicolumncombobox.adaptiveCloseButtonTitle|The title of the Close button of the ActionSheet that is rendered instead of the Popup when using small screen devices in adaptive mode"
12612
13211
  adaptiveCloseButtonTitle="Close"
13212
+ i18n-listboxLabel="kendo.multicolumncombobox.listboxLabel|The accessible label of the listbox that contains the list of options"
13213
+ listboxLabel="Options"
12613
13214
  ></ng-container>
12614
13215
 
12615
13216
  <ng-container
@@ -12631,11 +13232,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
12631
13232
  <input
12632
13233
  kendoSearchbar
12633
13234
  [ariaControls]="ariaControls"
12634
- [ariaExpanded]="isOpen"
13235
+ [ariaExpanded]="isAdaptive ? false : isOpen"
12635
13236
  [id]="focusableId"
12636
13237
  [isLoading]="loading"
12637
13238
  [isSuggestable]="suggest"
12638
- [isFilterable]="filterable"
13239
+ [hasListAutocomplete]="filterable"
12639
13240
  [activeDescendant]="activeDescendant"
12640
13241
  [userInput]="text"
12641
13242
  [suggestedText]="getSuggestion()"
@@ -12739,7 +13340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
12739
13340
  <!--grid header-->
12740
13341
  <div #header class="k-table-header">
12741
13342
  <div #headerWrap class="k-table-header-wrap">
12742
- <table #headerTable class="k-table" role="presentation">
13343
+ <table #headerTable class="k-table">
12743
13344
  <colgroup>
12744
13345
  @for (column of columns; track column) {
12745
13346
  @if (!column.hidden && column.matchesMedia) {
@@ -12823,7 +13424,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
12823
13424
  [virtual]="virtual"
12824
13425
  [type]="'dropdowngrid'"
12825
13426
  [rowWidth]="rowWidth"
13427
+ [columnsWidths]="visibleColumnsWidths"
12826
13428
  [showStickyHeader]="showStickyHeader"
13429
+ [ariaLabel]="messageFor('listboxLabel')"
12827
13430
  (pageChange)="pageChange($event)"
12828
13431
  (listResize)="updateHeaderPadding(header)"
12829
13432
  (popupListScroll)="headerWrap.scrollLeft = $event.target.scrollLeft;"
@@ -12850,20 +13453,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
12850
13453
  <!--user-defined footer template-->
12851
13454
  @if (footerTemplate) {
12852
13455
  <div class="k-table-footer">
12853
- <table class="k-table">
12854
- <tfoot class="k-table-tfoot">
12855
- <tr class="k-table-row">
12856
- <td class="k-table-td">
12857
- <ng-template
13456
+ <span class="k-table-td">
13457
+ <ng-template
12858
13458
  [templateContext]="{
12859
13459
  templateRef: footerTemplate.templateRef
12860
13460
  }"
12861
- >
12862
- </ng-template>
12863
- </td>
12864
- </tr>
12865
- </tfoot>
12866
- </table>
13461
+ >
13462
+ </ng-template>
13463
+ </span>
12867
13464
  </div>
12868
13465
  }
12869
13466
  </div>
@@ -12907,10 +13504,10 @@ class NodeTemplateDirective {
12907
13504
  constructor(templateRef) {
12908
13505
  this.templateRef = templateRef;
12909
13506
  }
12910
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NodeTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
12911
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: NodeTemplateDirective, isStandalone: true, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]", ngImport: i0 });
13507
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NodeTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
13508
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: NodeTemplateDirective, isStandalone: true, selector: "[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]", ngImport: i0 });
12912
13509
  }
12913
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: NodeTemplateDirective, decorators: [{
13510
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: NodeTemplateDirective, decorators: [{
12914
13511
  type: Directive,
12915
13512
  args: [{
12916
13513
  selector: '[kendoDropDownTreeNodeTemplate], [kendoMultiSelectTreeNodeTemplate]',
@@ -12993,7 +13590,7 @@ class DropDownTreeComponent {
12993
13590
  return this.readonly ? '' : null;
12994
13591
  }
12995
13592
  get hostAriaInvalid() {
12996
- return this.formControl?.invalid ? true : null;
13593
+ return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
12997
13594
  }
12998
13595
  get isDisabled() {
12999
13596
  return this.disabled || null;
@@ -13005,7 +13602,7 @@ class DropDownTreeComponent {
13005
13602
  return this.loading ? 'true' : null;
13006
13603
  }
13007
13604
  get hostAriaControls() {
13008
- return this.isOpen ? this.treeViewId : null;
13605
+ return (!this.isAdaptive && this.isOpen) ? this.treeViewId : null;
13009
13606
  }
13010
13607
  get id() {
13011
13608
  return this.focusableId;
@@ -13017,7 +13614,7 @@ class DropDownTreeComponent {
13017
13614
  role = 'combobox';
13018
13615
  ariaHasPopup = 'tree';
13019
13616
  get isAriaExpanded() {
13020
- return this.isOpen;
13617
+ return this.isAdaptive ? false : this.isOpen;
13021
13618
  }
13022
13619
  get hostAriaAutocomplete() {
13023
13620
  return this.filterable ? 'list' : null;
@@ -13037,6 +13634,7 @@ class DropDownTreeComponent {
13037
13634
  // the treeview animations are initially disabled (we don't want expand animations during popup opening)
13038
13635
  // re-enables the animations for user interaction
13039
13636
  treeview.animate = true;
13637
+ treeview.loadMoreButtonRole = 'treeitem';
13040
13638
  this._treeview = treeview;
13041
13639
  }
13042
13640
  }
@@ -13337,7 +13935,12 @@ class DropDownTreeComponent {
13337
13935
  get isFilterActive() {
13338
13936
  return this.filterInput && document.activeElement === this.filterInput.nativeElement;
13339
13937
  }
13340
- popupRef;
13938
+ set popupRef(value) {
13939
+ this._popupRef.set(value);
13940
+ }
13941
+ get popupRef() {
13942
+ return this._popupRef();
13943
+ }
13341
13944
  /**
13342
13945
  * @hidden
13343
13946
  */
@@ -13492,6 +14095,7 @@ class DropDownTreeComponent {
13492
14095
  _size;
13493
14096
  _rounded;
13494
14097
  _fillMode;
14098
+ _popupRef = signal(null, ...(ngDevMode ? [{ debugName: "_popupRef" }] : []));
13495
14099
  _searchableNodes = [];
13496
14100
  _typedValue = '';
13497
14101
  printableCharacters = new Subject();
@@ -13736,7 +14340,7 @@ class DropDownTreeComponent {
13736
14340
  * @hidden
13737
14341
  */
13738
14342
  get popupContainerClasses() {
13739
- const containerClasses = ['k-dropdowntree-popup'];
14343
+ const containerClasses = ['k-list-container', 'k-dropdowntree-popup'];
13740
14344
  if (!this.popupSettings.popupClass) {
13741
14345
  return containerClasses;
13742
14346
  }
@@ -14194,8 +14798,8 @@ class DropDownTreeComponent {
14194
14798
  this.opened.emit();
14195
14799
  this.removeTreeViewFromTabOrder();
14196
14800
  }
14197
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
14198
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DropDownTreeComponent, isStandalone: true, selector: "kendo-dropdowntree", inputs: { icon: "icon", svgIcon: "svgIcon", loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.readonly": "this.isReadonly", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-readonly": "this.readonly" } }, providers: [
14801
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
14802
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: DropDownTreeComponent, isStandalone: true, selector: "kendo-dropdowntree", inputs: { icon: "icon", svgIcon: "svgIcon", loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId", adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.readonly": "this.isReadonly", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-readonly": "this.readonly" } }, providers: [
14199
14803
  DataService,
14200
14804
  SelectionService,
14201
14805
  NavigationService,
@@ -14314,6 +14918,7 @@ class DropDownTreeComponent {
14314
14918
  [title]="adaptiveTitle"
14315
14919
  [showTextInput]="filterable"
14316
14920
  [subtitle]="adaptiveSubtitle"
14921
+ [showListContainer]="false"
14317
14922
  (closePopup)="togglePopup(false)"
14318
14923
  (textInputChange)="handleFilterInputChange($event)"
14319
14924
  [placeholder]="placeholder"
@@ -14330,14 +14935,14 @@ class DropDownTreeComponent {
14330
14935
  class="k-textbox k-input"
14331
14936
  [ngClass]="filterInputClasses"
14332
14937
  >
14333
- <span class="k-input-prefix">
14938
+ <span class="k-input-prefix k-input-prefix-horizontal">
14334
14939
  <kendo-icon-wrapper
14335
- class="k-icon"
14336
14940
  name="search"
14337
14941
  [svgIcon]="searchIcon"
14338
14942
  >
14339
14943
  </kendo-icon-wrapper>
14340
14944
  </span>
14945
+ <kendo-separator></kendo-separator>
14341
14946
  <input
14342
14947
  #filterInput
14343
14948
  (input)="handleFilterInputChange($event.target)"
@@ -14369,7 +14974,7 @@ class DropDownTreeComponent {
14369
14974
  <kendo-treeview
14370
14975
  #treeview
14371
14976
  [attr.id]="treeViewId"
14372
- [size]="windowSize !== 'large' ? 'large' : size"
14977
+ [size]="isAdaptive ? 'large' : size"
14373
14978
  [nodes]="data"
14374
14979
  [style.maxHeight.px]="listHeight"
14375
14980
  [animate]="false"
@@ -14422,9 +15027,9 @@ class DropDownTreeComponent {
14422
15027
  @if (isOpen || isAdaptiveModeEnabled) {
14423
15028
  <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
14424
15029
  }
14425
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
15030
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "loadMoreButtonRole", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: SelectDirective, selector: "[kendoTreeViewSelectable]", inputs: ["isSelected", "selectBy", "kendoTreeViewSelectable", "selectedKeys"], outputs: ["selectedKeysChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
14426
15031
  }
14427
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreeComponent, decorators: [{
15032
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeComponent, decorators: [{
14428
15033
  type: Component,
14429
15034
  args: [{
14430
15035
  exportAs: 'kendoDropDownTree',
@@ -14549,6 +15154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
14549
15154
  [title]="adaptiveTitle"
14550
15155
  [showTextInput]="filterable"
14551
15156
  [subtitle]="adaptiveSubtitle"
15157
+ [showListContainer]="false"
14552
15158
  (closePopup)="togglePopup(false)"
14553
15159
  (textInputChange)="handleFilterInputChange($event)"
14554
15160
  [placeholder]="placeholder"
@@ -14565,14 +15171,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
14565
15171
  class="k-textbox k-input"
14566
15172
  [ngClass]="filterInputClasses"
14567
15173
  >
14568
- <span class="k-input-prefix">
15174
+ <span class="k-input-prefix k-input-prefix-horizontal">
14569
15175
  <kendo-icon-wrapper
14570
- class="k-icon"
14571
15176
  name="search"
14572
15177
  [svgIcon]="searchIcon"
14573
15178
  >
14574
15179
  </kendo-icon-wrapper>
14575
15180
  </span>
15181
+ <kendo-separator></kendo-separator>
14576
15182
  <input
14577
15183
  #filterInput
14578
15184
  (input)="handleFilterInputChange($event.target)"
@@ -14604,7 +15210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
14604
15210
  <kendo-treeview
14605
15211
  #treeview
14606
15212
  [attr.id]="treeViewId"
14607
- [size]="windowSize !== 'large' ? 'large' : size"
15213
+ [size]="isAdaptive ? 'large' : size"
14608
15214
  [nodes]="data"
14609
15215
  [style.maxHeight.px]="listHeight"
14610
15216
  [animate]="false"
@@ -14660,7 +15266,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
14660
15266
  `,
14661
15267
  changeDetection: ChangeDetectionStrategy.OnPush,
14662
15268
  standalone: true,
14663
- imports: [LocalizedMessagesDirective, TemplateContextDirective, IconWrapperComponent, NgClass, NgTemplateOutlet, AdaptiveRendererComponent, FilterInputDirective, EventsOutsideAngularDirective, TreeViewComponent, SelectDirective, ResizeSensorComponent]
15269
+ imports: [LocalizedMessagesDirective, TemplateContextDirective, IconWrapperComponent, NgClass, NgTemplateOutlet, AdaptiveRendererComponent, FilterInputDirective, EventsOutsideAngularDirective, TreeViewComponent, SelectDirective, ResizeSensorComponent, SeparatorComponent]
14664
15270
  }]
14665
15271
  }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.PopupService }, { type: NavigationService }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }, { type: i7.AdaptiveService }], propDecorators: { icon: [{
14666
15272
  type: Input
@@ -14900,10 +15506,10 @@ class MultiSelectTreeLookupService {
14900
15506
  };
14901
15507
  });
14902
15508
  }
14903
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
14904
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeLookupService });
15509
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeLookupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
15510
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeLookupService });
14905
15511
  }
14906
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeLookupService, decorators: [{
15512
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeLookupService, decorators: [{
14907
15513
  type: Injectable
14908
15514
  }] });
14909
15515
 
@@ -14964,10 +15570,10 @@ class BaseCheckDirective {
14964
15570
  getKey(item, level) {
14965
15571
  return valueFrom(item, this.valueField) + '_' + (this.isHeterogeneous ? level : 0);
14966
15572
  }
14967
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BaseCheckDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
14968
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: BaseCheckDirective, isStandalone: true, inputs: { valueField: "valueField", checkedItems: "checkedItems", isHeterogeneous: "isHeterogeneous" }, ngImport: i0 });
15573
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: BaseCheckDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
15574
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: BaseCheckDirective, isStandalone: true, inputs: { valueField: "valueField", checkedItems: "checkedItems", isHeterogeneous: "isHeterogeneous" }, ngImport: i0 });
14969
15575
  }
14970
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BaseCheckDirective, decorators: [{
15576
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: BaseCheckDirective, decorators: [{
14971
15577
  type: Directive
14972
15578
  }], propDecorators: { valueField: [{
14973
15579
  type: Input
@@ -15115,10 +15721,10 @@ class CheckDirective extends BaseCheckDirective {
15115
15721
  }
15116
15722
  return false;
15117
15723
  }
15118
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckDirective, deps: [{ token: i1$1.TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
15119
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: CheckDirective, isStandalone: true, selector: "[kendoMultiSelectTreeCheckable]", inputs: { checkable: "checkable", valueField: "valueField", checkedItems: "checkedItems" }, outputs: { checkedItemsChange: "checkedItemsChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
15724
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CheckDirective, deps: [{ token: i1$1.TreeViewComponent }], target: i0.ɵɵFactoryTarget.Directive });
15725
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: CheckDirective, isStandalone: true, selector: "[kendoMultiSelectTreeCheckable]", inputs: { checkable: "checkable", valueField: "valueField", checkedItems: "checkedItems" }, outputs: { checkedItemsChange: "checkedItemsChange" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
15120
15726
  }
15121
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckDirective, decorators: [{
15727
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CheckDirective, decorators: [{
15122
15728
  type: Directive,
15123
15729
  args: [{
15124
15730
  selector: '[kendoMultiSelectTreeCheckable]',
@@ -15268,10 +15874,10 @@ class CheckAllDirective extends BaseCheckDirective {
15268
15874
  });
15269
15875
  return childrenChecked || this.isItemChecked(lookup.item);
15270
15876
  }
15271
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckAllDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
15272
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: CheckAllDirective, isStandalone: true, selector: "[checkAll]", inputs: { lastAction: "lastAction", treeview: "treeview", checkedItems: "checkedItems", valueField: "valueField", focused: ["checkAll", "focused"] }, outputs: { checkedItemsChange: "checkedItemsChange" }, host: { listeners: { "change": "handleChange($event.target)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
15877
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CheckAllDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
15878
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: CheckAllDirective, isStandalone: true, selector: "[checkAll]", inputs: { lastAction: "lastAction", treeview: "treeview", checkedItems: "checkedItems", valueField: "valueField", focused: ["checkAll", "focused"] }, outputs: { checkedItemsChange: "checkedItemsChange" }, host: { listeners: { "change": "handleChange($event.target)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
15273
15879
  }
15274
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CheckAllDirective, decorators: [{
15880
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CheckAllDirective, decorators: [{
15275
15881
  type: Directive,
15276
15882
  args: [{
15277
15883
  selector: '[checkAll]',
@@ -15364,14 +15970,11 @@ class MultiSelectTreeComponent {
15364
15970
  return this.disabled || null;
15365
15971
  }
15366
15972
  treeViewId = `k-${guid()}`;
15367
- get hostAriaAutocomplete() {
15368
- return this.filterable ? 'list' : null;
15369
- }
15370
15973
  get isLoading() {
15371
15974
  return this.loading;
15372
15975
  }
15373
15976
  get hostAriaInvalid() {
15374
- return this.formControl?.invalid ? true : null;
15977
+ return (this.formControl?.invalid && (this.formControl?.touched || this.formControl?.dirty)) ? true : null;
15375
15978
  }
15376
15979
  get isBusy() {
15377
15980
  return this.loading ? 'true' : null;
@@ -15383,14 +15986,9 @@ class MultiSelectTreeComponent {
15383
15986
  get hostTabIndex() {
15384
15987
  return this.tabindex;
15385
15988
  }
15386
- role = 'combobox';
15387
- ariaHasPopup = 'tree';
15388
15989
  get isReadonly() {
15389
15990
  return this.readonly ? '' : null;
15390
15991
  }
15391
- get ariaDescribedBy() {
15392
- return this.tagListId;
15393
- }
15394
15992
  get ariaActiveDescendant() {
15395
15993
  return this.focusedTagId;
15396
15994
  }
@@ -16085,7 +16683,6 @@ class MultiSelectTreeComponent {
16085
16683
  this._typedValue = '';
16086
16684
  }));
16087
16685
  this.renderer.removeAttribute(this.wrapper.nativeElement, 'tabindex');
16088
- this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', String(this.isOpen));
16089
16686
  this.subs.add(this.localization
16090
16687
  .changes.subscribe(({ rtl }) => {
16091
16688
  this.direction = rtl ? 'rtl' : 'ltr';
@@ -16539,9 +17136,7 @@ class MultiSelectTreeComponent {
16539
17136
  popupWrapper.style.minWidth = min;
16540
17137
  popupWrapper.style.width = max;
16541
17138
  popupWrapper.style.height = this.height;
16542
- this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
16543
17139
  this.renderer.setAttribute(popupWrapper, 'dir', this.direction);
16544
- this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
16545
17140
  this.popupRef.popupOpen.subscribe(() => {
16546
17141
  this.cdr.detectChanges();
16547
17142
  this.opened.emit();
@@ -16562,8 +17157,6 @@ class MultiSelectTreeComponent {
16562
17157
  if (this.popupRef) {
16563
17158
  this.popupRef.close();
16564
17159
  this.popupRef = null;
16565
- this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
16566
- this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
16567
17160
  this.clearFilter();
16568
17161
  }
16569
17162
  }
@@ -16877,8 +17470,6 @@ class MultiSelectTreeComponent {
16877
17470
  closeActionSheet() {
16878
17471
  this.wrapper.nativeElement.focus();
16879
17472
  this.actionSheet.toggle(false);
16880
- this.renderer.removeAttribute(this.wrapper.nativeElement, 'aria-controls');
16881
- this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'false');
16882
17473
  this.clearFilter();
16883
17474
  this.closed.emit();
16884
17475
  }
@@ -16886,13 +17477,11 @@ class MultiSelectTreeComponent {
16886
17477
  this.actionSheet.toggle(true);
16887
17478
  this.adaptiveTitle = setActionSheetTitle(this.wrapper, this.adaptiveTitle);
16888
17479
  this.cdr.detectChanges();
16889
- this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-controls', this.treeViewId);
16890
- this.renderer.setAttribute(this.wrapper.nativeElement, 'aria-expanded', 'true');
16891
17480
  this.cdr.detectChanges();
16892
17481
  this.opened.emit();
16893
17482
  }
16894
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
16895
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
17483
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: i7.AdaptiveService }], target: i0.ɵɵFactoryTarget.Component });
17484
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: MultiSelectTreeComponent, isStandalone: true, selector: "kendo-multiselecttree", inputs: { adaptiveMode: "adaptiveMode", adaptiveTitle: "adaptiveTitle", adaptiveSubtitle: "adaptiveSubtitle", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-disabled": "this.isDisabled", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.readonly": "this.isReadonly", "attr.aria-activedescendant": "this.ariaActiveDescendant", "class.k-readonly": "this.readonly" } }, providers: [
16896
17485
  LocalizationService,
16897
17486
  NavigationService,
16898
17487
  DataService,
@@ -16928,6 +17517,9 @@ class MultiSelectTreeComponent {
16928
17517
  i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
16929
17518
  clearTitle="clear"
16930
17519
 
17520
+ i18n-chipListLabel="kendo.multiselecttree.chipListLabel|The accessible label of the tag list element that contains the selected items"
17521
+ chipListLabel="chip list"
17522
+
16931
17523
  i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
16932
17524
  checkAllText="Check all"
16933
17525
 
@@ -16942,6 +17534,9 @@ class MultiSelectTreeComponent {
16942
17534
 
16943
17535
  i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
16944
17536
  filterInputPlaceholder="Filter"
17537
+
17538
+ i18n-inputLabel="kendo.multiselecttree.inputLabel|The text set as aria-label on the combobox input element"
17539
+ inputLabel="Select items"
16945
17540
  >
16946
17541
  </ng-container>
16947
17542
  <kendo-taglist
@@ -16960,10 +17555,19 @@ class MultiSelectTreeComponent {
16960
17555
  [template]="tagTemplate"
16961
17556
  [groupTemplate]="groupTagTemplate"
16962
17557
  [disabledIndices]="disabledIndices"
17558
+ [ariaLabel]="messageFor('chipListLabel')"
16963
17559
  (removeTag)="handleRemoveTag($event)"
16964
17560
  >
16965
17561
  </kendo-taglist>
16966
- <span class="k-input-inner">
17562
+ <span class="k-input-inner"
17563
+ role="combobox"
17564
+ aria-haspopup="tree"
17565
+ [attr.aria-expanded]="isOpen"
17566
+ [attr.aria-autocomplete]="filterable ? 'list' : null"
17567
+ [attr.aria-controls]="isOpen ? treeViewId : null"
17568
+ [attr.aria-describedby]="tags?.length ? tagListId : null"
17569
+ [attr.aria-disabled]="disabled || null"
17570
+ [attr.aria-label]="messageFor('inputLabel')">
16967
17571
  @if (!tags || !tags.length) {
16968
17572
  <span
16969
17573
  class="k-input-value-text"
@@ -16981,7 +17585,6 @@ class MultiSelectTreeComponent {
16981
17585
  (click)="clearAll($event)"
16982
17586
  >
16983
17587
  <kendo-icon-wrapper
16984
- class="k-icon"
16985
17588
  name="x"
16986
17589
  [svgIcon]="xIcon"
16987
17590
  >
@@ -17004,6 +17607,7 @@ class MultiSelectTreeComponent {
17004
17607
  [title]="adaptiveTitle"
17005
17608
  [showTextInput]="filterable"
17006
17609
  [subtitle]="adaptiveSubtitle"
17610
+ [showListContainer]="false"
17007
17611
  (closePopup)="togglePopup(false)"
17008
17612
  (textInputChange)="onFilterChange($event)"
17009
17613
  [searchBarValue]="filter"
@@ -17020,7 +17624,7 @@ class MultiSelectTreeComponent {
17020
17624
  class="k-textbox k-input"
17021
17625
  [ngClass]="filterInputClasses"
17022
17626
  >
17023
- <span class="k-input-prefix">
17627
+ <span class="k-input-prefix k-input-prefix-horizontal">
17024
17628
  <kendo-icon-wrapper
17025
17629
  class="k-icon"
17026
17630
  name="search"
@@ -17028,6 +17632,7 @@ class MultiSelectTreeComponent {
17028
17632
  >
17029
17633
  </kendo-icon-wrapper>
17030
17634
  </span>
17635
+ <kendo-separator></kendo-separator>
17031
17636
  <input
17032
17637
  #filterInput
17033
17638
  (input)="handleFilterInputChange($event.target)"
@@ -17151,9 +17756,9 @@ class MultiSelectTreeComponent {
17151
17756
  @if (isOpen || isAdaptiveModeEnabled) {
17152
17757
  <kendo-resize-sensor (resize)="onResize()"></kendo-resize-sensor>
17153
17758
  }
17154
- `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
17759
+ `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "component", type: TagListComponent, selector: "kendo-taglist", inputs: ["tags", "textField", "valueField", "valueDepth", "focused", "template", "groupTemplate", "disabled", "tagPrefix", "id", "ariaLabel", "size", "rounded", "fillMode", "disabledIndices"], outputs: ["removeTag"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdaptiveRendererComponent, selector: "kendo-adaptive-renderer", inputs: ["title", "subtitle", "showTextInput", "sharedPopupActionSheetTemplate", "text", "placeholder", "searchBarValue", "filterable", "showListContainer"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: FilterInputDirective, selector: "[filterInput]", inputs: ["filterInput"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: CheckAllDirective, selector: "[checkAll]", inputs: ["lastAction", "treeview", "checkedItems", "valueField", "checkAll"], outputs: ["checkedItemsChange"] }, { kind: "component", type: TreeViewComponent, selector: "kendo-treeview", inputs: ["filterInputPlaceholder", "expandDisabledNodes", "animate", "nodeTemplate", "loadMoreButtonTemplate", "loadMoreButtonRole", "trackBy", "nodes", "textField", "hasChildren", "isChecked", "isDisabled", "hasCheckbox", "isExpanded", "isSelected", "isVisible", "navigable", "children", "loadOnDemand", "filterable", "filter", "size", "disableParentNodesOnly"], outputs: ["childrenLoaded", "blur", "focus", "expand", "collapse", "nodeDragStart", "nodeDrag", "filterStateChange", "nodeDrop", "nodeDragEnd", "addItem", "removeItem", "checkedChange", "selectionChange", "filterChange", "nodeClick", "nodeDblClick"], exportAs: ["kendoTreeView"] }, { kind: "directive", type: CheckDirective, selector: "[kendoMultiSelectTreeCheckable]", inputs: ["checkable", "valueField", "checkedItems"], outputs: ["checkedItemsChange"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }] });
17155
17760
  }
17156
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
17761
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeComponent, decorators: [{
17157
17762
  type: Component,
17158
17763
  args: [{
17159
17764
  exportAs: 'kendoMultiSelectTree',
@@ -17195,6 +17800,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
17195
17800
  i18n-clearTitle="kendo.multiselecttree.clearTitle|The title of the clear button"
17196
17801
  clearTitle="clear"
17197
17802
 
17803
+ i18n-chipListLabel="kendo.multiselecttree.chipListLabel|The accessible label of the tag list element that contains the selected items"
17804
+ chipListLabel="chip list"
17805
+
17198
17806
  i18n-checkAllText="kendo.multiselecttree.checkAllText|The text displayed for the check-all checkbox"
17199
17807
  checkAllText="Check all"
17200
17808
 
@@ -17209,6 +17817,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
17209
17817
 
17210
17818
  i18n-filterInputPlaceholder="kendo.multiselecttree.filterInputPlaceholder|The text for the input's placeholder when filtering is enabled"
17211
17819
  filterInputPlaceholder="Filter"
17820
+
17821
+ i18n-inputLabel="kendo.multiselecttree.inputLabel|The text set as aria-label on the combobox input element"
17822
+ inputLabel="Select items"
17212
17823
  >
17213
17824
  </ng-container>
17214
17825
  <kendo-taglist
@@ -17227,10 +17838,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
17227
17838
  [template]="tagTemplate"
17228
17839
  [groupTemplate]="groupTagTemplate"
17229
17840
  [disabledIndices]="disabledIndices"
17841
+ [ariaLabel]="messageFor('chipListLabel')"
17230
17842
  (removeTag)="handleRemoveTag($event)"
17231
17843
  >
17232
17844
  </kendo-taglist>
17233
- <span class="k-input-inner">
17845
+ <span class="k-input-inner"
17846
+ role="combobox"
17847
+ aria-haspopup="tree"
17848
+ [attr.aria-expanded]="isOpen"
17849
+ [attr.aria-autocomplete]="filterable ? 'list' : null"
17850
+ [attr.aria-controls]="isOpen ? treeViewId : null"
17851
+ [attr.aria-describedby]="tags?.length ? tagListId : null"
17852
+ [attr.aria-disabled]="disabled || null"
17853
+ [attr.aria-label]="messageFor('inputLabel')">
17234
17854
  @if (!tags || !tags.length) {
17235
17855
  <span
17236
17856
  class="k-input-value-text"
@@ -17248,7 +17868,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
17248
17868
  (click)="clearAll($event)"
17249
17869
  >
17250
17870
  <kendo-icon-wrapper
17251
- class="k-icon"
17252
17871
  name="x"
17253
17872
  [svgIcon]="xIcon"
17254
17873
  >
@@ -17271,6 +17890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
17271
17890
  [title]="adaptiveTitle"
17272
17891
  [showTextInput]="filterable"
17273
17892
  [subtitle]="adaptiveSubtitle"
17893
+ [showListContainer]="false"
17274
17894
  (closePopup)="togglePopup(false)"
17275
17895
  (textInputChange)="onFilterChange($event)"
17276
17896
  [searchBarValue]="filter"
@@ -17287,7 +17907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
17287
17907
  class="k-textbox k-input"
17288
17908
  [ngClass]="filterInputClasses"
17289
17909
  >
17290
- <span class="k-input-prefix">
17910
+ <span class="k-input-prefix k-input-prefix-horizontal">
17291
17911
  <kendo-icon-wrapper
17292
17912
  class="k-icon"
17293
17913
  name="search"
@@ -17295,6 +17915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
17295
17915
  >
17296
17916
  </kendo-icon-wrapper>
17297
17917
  </span>
17918
+ <kendo-separator></kendo-separator>
17298
17919
  <input
17299
17920
  #filterInput
17300
17921
  (input)="handleFilterInputChange($event.target)"
@@ -17420,17 +18041,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
17420
18041
  }
17421
18042
  `,
17422
18043
  standalone: true,
17423
- imports: [LocalizedMessagesDirective, TagListComponent, IconWrapperComponent, NgTemplateOutlet, AdaptiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent]
18044
+ imports: [LocalizedMessagesDirective, TagListComponent, IconWrapperComponent, NgTemplateOutlet, AdaptiveRendererComponent, NgClass, FilterInputDirective, EventsOutsideAngularDirective, TemplateContextDirective, CheckAllDirective, TreeViewComponent, CheckDirective, ResizeSensorComponent, SeparatorComponent]
17424
18045
  }]
17425
18046
  }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i2.PopupService }, { type: i0.Renderer2 }, { type: NavigationService }, { type: i0.NgZone }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: MultiSelectTreeLookupService }, { type: i7.AdaptiveService }], propDecorators: { isDisabled: [{
17426
18047
  type: HostBinding,
17427
18048
  args: ['class.k-disabled']
17428
- }, {
17429
- type: HostBinding,
17430
- args: ['attr.aria-disabled']
17431
- }], hostAriaAutocomplete: [{
17432
- type: HostBinding,
17433
- args: ['attr.aria-autocomplete']
17434
18049
  }], isLoading: [{
17435
18050
  type: HostBinding,
17436
18051
  args: ['class.k-loading']
@@ -17449,18 +18064,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
17449
18064
  }], hostTabIndex: [{
17450
18065
  type: HostBinding,
17451
18066
  args: ['attr.tabindex']
17452
- }], role: [{
17453
- type: HostBinding,
17454
- args: ['attr.role']
17455
- }], ariaHasPopup: [{
17456
- type: HostBinding,
17457
- args: ['attr.aria-haspopup']
17458
18067
  }], isReadonly: [{
17459
18068
  type: HostBinding,
17460
18069
  args: ['attr.readonly']
17461
- }], ariaDescribedBy: [{
17462
- type: HostBinding,
17463
- args: ['attr.aria-describedby']
17464
18070
  }], ariaActiveDescendant: [{
17465
18071
  type: HostBinding,
17466
18072
  args: ['attr.aria-activedescendant']
@@ -17637,10 +18243,10 @@ class DropDownTreeFlatBindingDirective extends FlatDataBindingDirective {
17637
18243
  }
17638
18244
  super.ngOnChanges(changes);
17639
18245
  }
17640
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
17641
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DropDownTreeFlatBindingDirective, isStandalone: true, selector: "[kendoDropDownTreeFlatBinding]", inputs: { nodes: ["kendoDropDownTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
18246
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
18247
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: DropDownTreeFlatBindingDirective, isStandalone: true, selector: "[kendoDropDownTreeFlatBinding]", inputs: { nodes: ["kendoDropDownTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
17642
18248
  }
17643
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreeFlatBindingDirective, decorators: [{
18249
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeFlatBindingDirective, decorators: [{
17644
18250
  type: Directive,
17645
18251
  args: [{
17646
18252
  selector: '[kendoDropDownTreeFlatBinding]',
@@ -17694,10 +18300,10 @@ class DropDownTreeHierarchyBindingDirective extends HierarchyBindingDirective {
17694
18300
  }
17695
18301
  super.ngOnChanges(changes);
17696
18302
  }
17697
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
17698
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DropDownTreeHierarchyBindingDirective, isStandalone: true, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: { nodes: ["kendoDropDownTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
18303
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
18304
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: DropDownTreeHierarchyBindingDirective, isStandalone: true, selector: "[kendoDropDownTreeHierarchyBinding]", inputs: { nodes: ["kendoDropDownTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
17699
18305
  }
17700
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, decorators: [{
18306
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreeHierarchyBindingDirective, decorators: [{
17701
18307
  type: Directive,
17702
18308
  args: [{
17703
18309
  selector: '[kendoDropDownTreeHierarchyBinding]',
@@ -17752,10 +18358,10 @@ class MultiSelectTreeFlatBindingDirective extends FlatDataBindingDirective {
17752
18358
  }
17753
18359
  super.ngOnChanges(changes);
17754
18360
  }
17755
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
17756
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: MultiSelectTreeFlatBindingDirective, isStandalone: true, selector: "[kendoMultiSelectTreeFlatBinding]", inputs: { nodes: ["kendoMultiSelectTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
18361
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
18362
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: MultiSelectTreeFlatBindingDirective, isStandalone: true, selector: "[kendoMultiSelectTreeFlatBinding]", inputs: { nodes: ["kendoMultiSelectTreeFlatBinding", "nodes"], idField: ["valueField", "idField"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
17757
18363
  }
17758
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, decorators: [{
18364
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeFlatBindingDirective, decorators: [{
17759
18365
  type: Directive,
17760
18366
  args: [{
17761
18367
  selector: '[kendoMultiSelectTreeFlatBinding]',
@@ -17809,10 +18415,10 @@ class MultiSelectTreeHierarchyBindingDirective extends HierarchyBindingDirective
17809
18415
  }
17810
18416
  super.ngOnChanges(changes);
17811
18417
  }
17812
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
17813
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: MultiSelectTreeHierarchyBindingDirective, isStandalone: true, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: { nodes: ["kendoMultiSelectTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
18418
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, deps: [{ token: i1$1.DataBoundComponent }], target: i0.ɵɵFactoryTarget.Directive });
18419
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: MultiSelectTreeHierarchyBindingDirective, isStandalone: true, selector: "[kendoMultiSelectTreeHierarchyBinding]", inputs: { nodes: ["kendoMultiSelectTreeHierarchyBinding", "nodes"] }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
17814
18420
  }
17815
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, decorators: [{
18421
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeHierarchyBindingDirective, decorators: [{
17816
18422
  type: Directive,
17817
18423
  args: [{
17818
18424
  selector: '[kendoMultiSelectTreeHierarchyBinding]',
@@ -17860,10 +18466,10 @@ class DropDownTreesExpandDirective extends ExpandDirective {
17860
18466
  super(dropDownTree);
17861
18467
  this.dropDownTree = dropDownTree;
17862
18468
  }
17863
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreesExpandDirective, deps: [{ token: i1$1.ExpandableComponent }], target: i0.ɵɵFactoryTarget.Directive });
17864
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: DropDownTreesExpandDirective, isStandalone: true, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: { isExpanded: ["isNodeExpanded", "isExpanded"] }, usesInheritance: true, ngImport: i0 });
18469
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesExpandDirective, deps: [{ token: i1$1.ExpandableComponent }], target: i0.ɵɵFactoryTarget.Directive });
18470
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: DropDownTreesExpandDirective, isStandalone: true, selector: "[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]", inputs: { isExpanded: ["isNodeExpanded", "isExpanded"] }, usesInheritance: true, ngImport: i0 });
17865
18471
  }
17866
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreesExpandDirective, decorators: [{
18472
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesExpandDirective, decorators: [{
17867
18473
  type: Directive,
17868
18474
  args: [{
17869
18475
  selector: '[kendoDropDownTreeExpandable], [kendoMultiSelectTreeExpandable]',
@@ -17881,7 +18487,6 @@ const DEFAULT_FILTER_SETTINGS = {
17881
18487
  /**
17882
18488
  * Implements an event handler for the `filterChange` event of a DropDowns component
17883
18489
  * which performs simple data filtering.
17884
- * Currently, the built-in filtering does not work with [grouped data](https://www.telerik.com/kendo-angular-ui/components/data-query/api/groupby).
17885
18490
  *
17886
18491
  * @example
17887
18492
  * ```ts
@@ -17941,7 +18546,14 @@ class FilterDirective {
17941
18546
  }
17942
18547
  }
17943
18548
  handleFilterChange(query) {
17944
- this.component.data = this.data.filter(item => this.matchesAnyField(item, query));
18549
+ if (isGroupedData(this.data)) {
18550
+ this.component.data = this.data
18551
+ .map(group => ({ ...group, items: group.items.filter(item => this.matchesAnyField(item, query)) }))
18552
+ .filter(group => group.items.length > 0);
18553
+ }
18554
+ else {
18555
+ this.component.data = this.data.filter(item => this.matchesAnyField(item, query));
18556
+ }
17945
18557
  }
17946
18558
  matchesAnyField(item, query) {
17947
18559
  const normalizedQuery = this.normalizeValue(query);
@@ -17984,10 +18596,10 @@ class FilterDirective {
17984
18596
  const providedFields = isPresent(settings) && typeof settings === 'object' ? settings.fields : [];
17985
18597
  return Object.assign({}, DEFAULT_FILTER_SETTINGS, settings, { fields: this.getFilterFields(providedFields) });
17986
18598
  }
17987
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterDirective, deps: [{ token: FilterableComponent }], target: i0.ɵɵFactoryTarget.Directive });
17988
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: FilterDirective, isStandalone: true, selector: "[kendoDropDownFilter]", inputs: { data: "data", rawSettings: ["kendoDropDownFilter", "rawSettings"], filterable: "filterable" }, ngImport: i0 });
18599
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FilterDirective, deps: [{ token: FilterableComponent }], target: i0.ɵɵFactoryTarget.Directive });
18600
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: FilterDirective, isStandalone: true, selector: "[kendoDropDownFilter]", inputs: { data: "data", rawSettings: ["kendoDropDownFilter", "rawSettings"], filterable: "filterable" }, ngImport: i0 });
17989
18601
  }
17990
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: FilterDirective, decorators: [{
18602
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: FilterDirective, decorators: [{
17991
18603
  type: Directive,
17992
18604
  args: [{
17993
18605
  selector: '[kendoDropDownFilter]',
@@ -18018,7 +18630,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
18018
18630
  * <kendo-combobox>
18019
18631
  * <kendo-combobox-messages
18020
18632
  * noDataText="No items found"
18021
- * filterInputPlaceholder="Search items">
18633
+ * filterInputPlaceholder="Search items"
18634
+ * clearTitle="Clear selection">
18022
18635
  * </kendo-combobox-messages>
18023
18636
  * </kendo-combobox>
18024
18637
  *
@@ -18032,7 +18645,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
18032
18645
  * <kendo-autocomplete>
18033
18646
  * <kendo-autocomplete-messages
18034
18647
  * noDataText="No items found"
18035
- * filterInputPlaceholder="Type to search">
18648
+ * filterInputPlaceholder="Type to search"
18649
+ * clearTitle="Clear input">
18036
18650
  * </kendo-autocomplete-messages>
18037
18651
  * </kendo-autocomplete>
18038
18652
  *
@@ -18067,15 +18681,15 @@ class CustomMessagesComponent extends Messages {
18067
18681
  get override() {
18068
18682
  return true;
18069
18683
  }
18070
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
18071
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-dropdownlist-messages,kendo-combobox-messages,kendo-multicolumncombobox-messages,kendo-autocomplete-messages,kendo-multiselect-messages,kendo-dropdowntree-messages,kendo-multiselecttree-messages", providers: [
18684
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
18685
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-dropdownlist-messages,kendo-combobox-messages,kendo-multicolumncombobox-messages,kendo-autocomplete-messages,kendo-multiselect-messages,kendo-dropdowntree-messages,kendo-multiselecttree-messages", providers: [
18072
18686
  {
18073
18687
  provide: Messages,
18074
18688
  useExisting: forwardRef(() => CustomMessagesComponent)
18075
18689
  }
18076
18690
  ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
18077
18691
  }
18078
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: CustomMessagesComponent, decorators: [{
18692
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: CustomMessagesComponent, decorators: [{
18079
18693
  type: Component,
18080
18694
  args: [{
18081
18695
  providers: [
@@ -18090,66 +18704,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
18090
18704
  }]
18091
18705
  }], ctorParameters: () => [{ type: i1.LocalizationService }] });
18092
18706
 
18093
- /**
18094
- * Configures the MultiSelect to show one summary tag for all selected items.
18095
- * Set a number to display the summary tag after the respective number of items are selected.
18096
- * [See example](https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode).
18097
- *
18098
- * @example
18099
- * ```ts-no-run
18100
- * <kendo-multiselect kendoMultiSelectSummaryTag [data]="data"></kendo-multiselect>
18101
- * ```
18102
- *
18103
- * @example
18104
- * ```ts-no-run
18105
- * <kendo-multiselect [kendoMultiSelectSummaryTag]="2" [data]="data"></kendo-multiselect>
18106
- * ```
18107
- */
18108
- class SummaryTagDirective {
18109
- multiSelectComponent;
18110
- /**
18111
- * Sets the number of selected items after which the summary tag appears.
18112
- *
18113
- * @default 0
18114
- */
18115
- showAfter = 0;
18116
- constructor(multiSelectComponent) {
18117
- this.multiSelectComponent = multiSelectComponent;
18118
- this.createTagMapper();
18119
- }
18120
- ngOnChanges(changes) {
18121
- if (isPresent(changes.showAfter)) {
18122
- this.createTagMapper();
18123
- this.multiSelectComponent.onTagMapperChange();
18124
- }
18125
- }
18126
- createTagMapper() {
18127
- const showAfter = parseNumber(this.showAfter);
18128
- this.multiSelectComponent.tagMapper = (tags) => {
18129
- if (tags.length > showAfter) {
18130
- const result = tags.slice(0, showAfter);
18131
- result.push(tags.slice(showAfter, tags.length));
18132
- return result;
18133
- }
18134
- else {
18135
- return tags;
18136
- }
18137
- };
18138
- }
18139
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SummaryTagDirective, deps: [{ token: MultiSelectComponent }], target: i0.ɵɵFactoryTarget.Directive });
18140
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: SummaryTagDirective, isStandalone: true, selector: "[kendoMultiSelectSummaryTag]", inputs: { showAfter: ["kendoMultiSelectSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
18141
- }
18142
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SummaryTagDirective, decorators: [{
18143
- type: Directive,
18144
- args: [{
18145
- selector: '[kendoMultiSelectSummaryTag]',
18146
- standalone: true
18147
- }]
18148
- }], ctorParameters: () => [{ type: MultiSelectComponent }], propDecorators: { showAfter: [{
18149
- type: Input,
18150
- args: ['kendoMultiSelectSummaryTag']
18151
- }] } });
18152
-
18153
18707
  /**
18154
18708
  * Configures the MultiSelectTree to show one single summary tag for all selected data items.
18155
18709
  * When a number is set, the summary tag is shown after the corresponding number of data items are selected (see examples).
@@ -18198,10 +18752,10 @@ class MultiSelectTreeSummaryTagDirective {
18198
18752
  }
18199
18753
  };
18200
18754
  }
18201
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, deps: [{ token: MultiSelectTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
18202
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: MultiSelectTreeSummaryTagDirective, isStandalone: true, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: { showAfter: ["kendoMultiSelectTreeSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
18755
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, deps: [{ token: MultiSelectTreeComponent }], target: i0.ɵɵFactoryTarget.Directive });
18756
+ static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: MultiSelectTreeSummaryTagDirective, isStandalone: true, selector: "[kendoMultiSelectTreeSummaryTag]", inputs: { showAfter: ["kendoMultiSelectTreeSummaryTag", "showAfter"] }, usesOnChanges: true, ngImport: i0 });
18203
18757
  }
18204
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, decorators: [{
18758
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectTreeSummaryTagDirective, decorators: [{
18205
18759
  type: Directive,
18206
18760
  args: [{
18207
18761
  selector: '[kendoMultiSelectTreeSummaryTag]',
@@ -18288,7 +18842,6 @@ const KENDO_DROPDOWNLIST = [
18288
18842
  */
18289
18843
  const KENDO_MULTISELECT = [
18290
18844
  MultiSelectComponent,
18291
- SummaryTagDirective,
18292
18845
  CustomItemTemplateDirective,
18293
18846
  FixedGroupTemplateDirective,
18294
18847
  FooterTemplateDirective,
@@ -18371,9 +18924,9 @@ const KENDO_DROPDOWNS = [
18371
18924
  * - `CustomMessagesComponent`&mdash;The custom messages component.
18372
18925
  */
18373
18926
  class DropDownTreesModule {
18374
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
18375
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreesModule, imports: [DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent], exports: [DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent] });
18376
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreesModule, providers: [
18927
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
18928
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesModule, imports: [DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent], exports: [DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent] });
18929
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesModule, providers: [
18377
18930
  IconsService,
18378
18931
  PopupService,
18379
18932
  ResizeBatchService,
@@ -18384,7 +18937,7 @@ class DropDownTreesModule {
18384
18937
  AdaptiveService
18385
18938
  ], imports: [DropDownTreeComponent, MultiSelectTreeComponent] });
18386
18939
  }
18387
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownTreesModule, decorators: [{
18940
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownTreesModule, decorators: [{
18388
18941
  type: NgModule,
18389
18942
  args: [{
18390
18943
  imports: [...KENDO_DROPDOWNTREE, ...KENDO_MULTISELECTTREE],
@@ -18423,11 +18976,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
18423
18976
  * ```
18424
18977
  */
18425
18978
  class DropDownsModule {
18426
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
18427
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: DropDownsModule, imports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, MultiSelectComponent, SummaryTagDirective, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, MultiSelectComponent, SummaryTagDirective, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
18428
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownsModule, providers: [PopupService, ResizeBatchService, IconsService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [AutoCompleteComponent, i10.SeparatorComponent, ComboBoxComponent, i10.SeparatorComponent, MultiColumnComboBoxComponent, i10.SeparatorComponent, DropDownListComponent, MultiSelectComponent, i10.SeparatorComponent, DropDownTreeComponent, MultiSelectTreeComponent, i10.SeparatorComponent] });
18979
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
18980
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: DropDownsModule, imports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, DropDownTreesExpandDirective, NodeTemplateDirective, MultiSelectTreeSummaryTagDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, FooterTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, CustomMessagesComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
18981
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownsModule, providers: [PopupService, ResizeBatchService, IconsService, DialogContainerService, DialogService, WindowService, WindowContainerService, AdaptiveService], imports: [AutoCompleteComponent, i10.SeparatorComponent, ComboBoxComponent, i10.SeparatorComponent, MultiColumnComboBoxComponent, i10.SeparatorComponent, DropDownListComponent, MultiSelectComponent, i10.SeparatorComponent, DropDownTreeComponent, MultiSelectTreeComponent, i10.SeparatorComponent] });
18429
18982
  }
18430
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownsModule, decorators: [{
18983
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownsModule, decorators: [{
18431
18984
  type: NgModule,
18432
18985
  args: [{
18433
18986
  exports: [...KENDO_DROPDOWNS, ...KENDO_ADORNMENTS, ...KENDO_TOGGLEBUTTONTABSTOP],
@@ -18442,7 +18995,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
18442
18995
  *
18443
18996
  * This module exports all MultiSelect-related components and directives:
18444
18997
  * - `MultiSelectComponent`&mdash;The main MultiSelect component class.
18445
- * - `SummaryTagDirective`&mdash;The summary tag directive for MultiSelect.
18446
18998
  * - `ItemTemplateDirective`&mdash;The item template directive.
18447
18999
  * - `CustomItemTemplateDirective`&mdash;The custom item template directive.
18448
19000
  * - `TagTemplateDirective`&mdash;The tag template directive.
@@ -18468,16 +19020,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
18468
19020
  * ```
18469
19021
  */
18470
19022
  class MultiSelectModule {
18471
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
18472
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectModule, imports: [MultiSelectComponent, SummaryTagDirective, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [MultiSelectComponent, SummaryTagDirective, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
18473
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectModule, providers: [
19023
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
19024
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectModule, imports: [MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [MultiSelectComponent, CustomItemTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, GroupTagTemplateDirective, TagTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
19025
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectModule, providers: [
18474
19026
  PopupService,
18475
19027
  ResizeBatchService,
18476
19028
  IconsService,
18477
19029
  AdaptiveService
18478
19030
  ], imports: [MultiSelectComponent, i10.SeparatorComponent, i10.SeparatorComponent] });
18479
19031
  }
18480
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: MultiSelectModule, decorators: [{
19032
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: MultiSelectModule, decorators: [{
18481
19033
  type: NgModule,
18482
19034
  args: [{
18483
19035
  imports: [...KENDO_MULTISELECT, ...KENDO_ADORNMENTS],
@@ -18518,16 +19070,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
18518
19070
  * - `PrefixTemplateDirective`&mdash;The prefix template directive.
18519
19071
  */
18520
19072
  class AutoCompleteModule {
18521
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
18522
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: AutoCompleteModule, imports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
18523
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutoCompleteModule, providers: [
19073
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
19074
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteModule, imports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent], exports: [AutoCompleteComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent] });
19075
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteModule, providers: [
18524
19076
  PopupService,
18525
19077
  ResizeBatchService,
18526
19078
  IconsService,
18527
19079
  AdaptiveService
18528
19080
  ], imports: [AutoCompleteComponent, i10.SeparatorComponent, i10.SeparatorComponent] });
18529
19081
  }
18530
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AutoCompleteModule, decorators: [{
19082
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: AutoCompleteModule, decorators: [{
18531
19083
  type: NgModule,
18532
19084
  args: [{
18533
19085
  imports: [...KENDO_AUTOCOMPLETE, ...KENDO_ADORNMENTS],
@@ -18571,16 +19123,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
18571
19123
  * ```
18572
19124
  */
18573
19125
  class ComboBoxModule {
18574
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
18575
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: ComboBoxModule, imports: [ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
18576
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComboBoxModule, providers: [
19126
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
19127
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxModule, imports: [ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective], exports: [ComboBoxComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, MultiColumnComboBoxComponent, ComboBoxColumnComponent, ColumnHeaderTemplateDirective, ColumnCellTemplateDirective, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent, i10.SuffixTemplateDirective, i10.PrefixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective, i10.PrefixTemplateDirective, i10.SuffixTemplateDirective, i10.SeparatorComponent, i10.ToggleButtonTabStopDirective] });
19128
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxModule, providers: [
18577
19129
  PopupService,
18578
19130
  ResizeBatchService,
18579
19131
  IconsService,
18580
19132
  AdaptiveService
18581
19133
  ], imports: [ComboBoxComponent, i10.SeparatorComponent, MultiColumnComboBoxComponent, i10.SeparatorComponent, i10.SeparatorComponent] });
18582
19134
  }
18583
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: ComboBoxModule, decorators: [{
19135
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: ComboBoxModule, decorators: [{
18584
19136
  type: NgModule,
18585
19137
  args: [{
18586
19138
  imports: [...KENDO_COMBOBOX, ...KENDO_MULTICOLUMNCOMBOBOX, ...KENDO_ADORNMENTS, ...KENDO_TOGGLEBUTTONTABSTOP],
@@ -18630,16 +19182,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
18630
19182
  * ```
18631
19183
  */
18632
19184
  class DropDownListModule {
18633
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
18634
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: DropDownListModule, imports: [DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent], exports: [DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent] });
18635
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownListModule, providers: [
19185
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
19186
+ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: DropDownListModule, imports: [DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent], exports: [DropDownListComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, ValueTemplateDirective, NoDataTemplateDirective, FilterDirective, CustomMessagesComponent] });
19187
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownListModule, providers: [
18636
19188
  PopupService,
18637
19189
  ResizeBatchService,
18638
19190
  IconsService,
18639
19191
  AdaptiveService
18640
19192
  ], imports: [DropDownListComponent] });
18641
19193
  }
18642
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DropDownListModule, decorators: [{
19194
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: DropDownListModule, decorators: [{
18643
19195
  type: NgModule,
18644
19196
  args: [{
18645
19197
  imports: [...KENDO_DROPDOWNLIST],
@@ -18657,5 +19209,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
18657
19209
  * Generated bundle index. Do not edit.
18658
19210
  */
18659
19211
 
18660
- export { AdaptiveRendererComponent, AutoCompleteComponent, AutoCompleteModule, CheckAllDirective, CheckDirective, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, ComboBoxColumnComponent, ComboBoxComponent, ComboBoxModule, CustomItemTemplateDirective, CustomMessagesComponent, DataService, DisabledItemsService, DropDownListComponent, DropDownListModule, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, DropDownsModule, FilterDirective, FilterInputDirective, FilterableComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTagTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, KENDO_AUTOCOMPLETE, KENDO_COMBOBOX, KENDO_DROPDOWNLIST, KENDO_DROPDOWNS, KENDO_DROPDOWNTREE, KENDO_MULTICOLUMNCOMBOBOX, KENDO_MULTISELECT, KENDO_MULTISELECTTREE, ListComponent, ListItemDirective, LocalizedMessagesDirective, MultiColumnComboBoxComponent, MultiSelectComponent, MultiSelectModule, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, MultiSelectTreeSummaryTagDirective, NavigationService, NoDataTemplateDirective, NodeTemplateDirective, PreventableEvent, RemoveTagEvent, SearchBarComponent, SelectableDirective, SelectionService, SummaryTagDirective, TagListComponent, TagTemplateDirective, ValueTemplateDirective };
19212
+ export { AdaptiveRendererComponent, AutoCompleteComponent, AutoCompleteModule, CheckAllDirective, CheckDirective, ColumnCellTemplateDirective, ColumnHeaderTemplateDirective, ComboBoxColumnComponent, ComboBoxComponent, ComboBoxModule, CustomItemTemplateDirective, CustomMessagesComponent, DataService, DisabledItemsService, DropDownListComponent, DropDownListModule, DropDownTreeComponent, DropDownTreeFlatBindingDirective, DropDownTreeHierarchyBindingDirective, DropDownTreesExpandDirective, DropDownTreesModule, DropDownsModule, FilterDirective, FilterInputDirective, FilterableComponent, FixedGroupTemplateDirective, FooterTemplateDirective, GroupTagTemplateDirective, GroupTemplateDirective, HeaderTemplateDirective, ItemTemplateDirective, KENDO_AUTOCOMPLETE, KENDO_COMBOBOX, KENDO_DROPDOWNLIST, KENDO_DROPDOWNS, KENDO_DROPDOWNTREE, KENDO_MULTICOLUMNCOMBOBOX, KENDO_MULTISELECT, KENDO_MULTISELECTTREE, ListComponent, ListItemDirective, LocalizedMessagesDirective, MultiColumnComboBoxComponent, MultiSelectComponent, MultiSelectModule, MultiSelectTreeComponent, MultiSelectTreeFlatBindingDirective, MultiSelectTreeHierarchyBindingDirective, MultiSelectTreeSummaryTagDirective, NavigationService, NoDataTemplateDirective, NodeTemplateDirective, PreventableEvent, RemoveTagEvent, SearchBarComponent, SelectableDirective, SelectionService, TagListComponent, TagTemplateDirective, ValueTemplateDirective };
18661
19213