@progress/kendo-angular-dropdowns 16.3.0-develop.9 → 16.3.1-develop.1

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, Component, Input, Output, ViewChild, HostBinding, Directive, Injectable, HostListener, ViewChildren, InjectionToken, forwardRef, isDevMode, ViewContainerRef, Optional, Inject, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
6
+ import { EventEmitter, Component, Input, HostBinding, Output, Directive, Injectable, HostListener, ViewChildren, ViewChild, InjectionToken, forwardRef, isDevMode, ViewContainerRef, Optional, Inject, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
7
7
  import * as i12 from '@progress/kendo-angular-common';
8
8
  import { isDocumentAvailable, isObjectPresent, removeHTMLAttributes, parseAttributes, isSafari, Keys, setHTMLAttributes, isChanged, closest as closest$1, isControlRequired, hasObservers, KendoInput, SuffixTemplateDirective, PrefixTemplateDirective, MultiTabStop, anyChanged, guid as guid$1, ResizeSensorModule, EventsModule, AdornmentsModule, ToggleButtonTabStopModule } from '@progress/kendo-angular-common';
9
9
  export { PrefixTemplateDirective, SeparatorComponent, SuffixTemplateDirective, ToggleButtonTabStopDirective } from '@progress/kendo-angular-common';
@@ -38,8 +38,8 @@ const packageMetadata = {
38
38
  name: '@progress/kendo-angular-dropdowns',
39
39
  productName: 'Kendo UI for Angular',
40
40
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
41
- publishDate: 1718629477,
42
- version: '16.3.0-develop.9',
41
+ publishDate: 1719306642,
42
+ version: '16.3.1-develop.1',
43
43
  licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
44
44
  };
45
45
 
@@ -473,16 +473,17 @@ const animationDuration = 300;
473
473
  * @hidden
474
474
  */
475
475
  class SearchBarComponent {
476
- constructor(localization, renderer, injector) {
476
+ constructor(localization, renderer, injector, input) {
477
477
  this.localization = localization;
478
478
  this.injector = injector;
479
+ this.input = input;
479
480
  this.ariaExpanded = null;
481
+ this.role = 'combobox';
480
482
  this.valueChange = new EventEmitter();
481
483
  this.onBlur = new EventEmitter();
482
484
  this.onFocus = new EventEmitter();
483
485
  this.onClick = new EventEmitter();
484
486
  this.onNavigate = new EventEmitter();
485
- this.searchBarClass = true;
486
487
  this._userInput = "";
487
488
  this._previousValue = "";
488
489
  this._placeholder = "";
@@ -492,6 +493,45 @@ class SearchBarComponent {
492
493
  this.parsedAttributes = {};
493
494
  this.direction = localization.rtl ? 'rtl' : 'ltr';
494
495
  this.renderer = renderer;
496
+ this.renderer.addClass(this.input.nativeElement, 'k-input-inner');
497
+ this.renderer.setAttribute(this.input.nativeElement, 'aria-haspopup', 'listbox');
498
+ this.renderer.setAttribute(this.input.nativeElement, 'autocomplete', 'off');
499
+ }
500
+ set readonly(readonly) {
501
+ this._readonly = readonly;
502
+ if (this._readonly) {
503
+ this.renderer.setAttribute(this.input.nativeElement, 'readonly', '');
504
+ }
505
+ else {
506
+ this.renderer.removeAttribute(this.input.nativeElement, 'readonly');
507
+ }
508
+ }
509
+ get readonly() {
510
+ return this._readonly;
511
+ }
512
+ set disabled(disabled) {
513
+ this._disabled = disabled;
514
+ if (this._disabled) {
515
+ this.renderer.setAttribute(this.input.nativeElement, 'disabled', '');
516
+ }
517
+ else {
518
+ this.renderer.removeAttribute(this.input.nativeElement, 'disabled');
519
+ }
520
+ }
521
+ get disabled() {
522
+ return this._disabled;
523
+ }
524
+ set isRequired(isRequired) {
525
+ this._isRequired = isRequired;
526
+ if (this._isRequired) {
527
+ this.renderer.setAttribute(this.input.nativeElement, 'required', '');
528
+ }
529
+ else {
530
+ this.renderer.removeAttribute(this.input.nativeElement, 'required');
531
+ }
532
+ }
533
+ get isRequired() {
534
+ return this._isRequired;
495
535
  }
496
536
  set isSuggestable(isSuggestable) {
497
537
  this._isSuggestable = isSuggestable;
@@ -536,8 +576,8 @@ class SearchBarComponent {
536
576
  get inputAttributes() {
537
577
  return this._inputAttributes;
538
578
  }
539
- get value() {
540
- return this.input.nativeElement.value;
579
+ get attrAriaInvalid() {
580
+ return this.formControl?.invalid;
541
581
  }
542
582
  set placeholder(text) {
543
583
  this._placeholder = text || '';
@@ -546,6 +586,12 @@ class SearchBarComponent {
546
586
  get placeholder() {
547
587
  return this._placeholder;
548
588
  }
589
+ get dir() {
590
+ return this.direction;
591
+ }
592
+ get value() {
593
+ return this.input.nativeElement.value;
594
+ }
549
595
  get defaultAttributes() {
550
596
  return {
551
597
  id: this.id,
@@ -610,6 +656,12 @@ class SearchBarComponent {
610
656
  this._previousValue = this.userInput;
611
657
  }
612
658
  }
659
+ ngAfterViewInit() {
660
+ this.subs.add(this.input.nativeElement.addEventListener('input', (event) => this.handleInput(event)));
661
+ this.subs.add(this.input.nativeElement.addEventListener('focus', (event) => this.handleFocus(event)));
662
+ this.subs.add(this.input.nativeElement.addEventListener('blur', (event) => this.handleBlur(event)));
663
+ this.subs.add(this.input.nativeElement.addEventListener('keydown', (event) => this.handleKeydown(event)));
664
+ }
613
665
  ngOnDestroy() {
614
666
  this.subs.unsubscribe();
615
667
  }
@@ -688,87 +740,19 @@ class SearchBarComponent {
688
740
  setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement);
689
741
  }
690
742
  }
691
- SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
692
- SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchBarComponent, selector: "kendo-searchbar", inputs: { id: "id", tagListId: "tagListId", activeDescendant: "activeDescendant", disabled: "disabled", readonly: "readonly", tabIndex: "tabIndex", role: "role", isLoading: "isLoading", ariaControls: "ariaControls", ariaExpanded: "ariaExpanded", isRequired: "isRequired", isSuggestable: "isSuggestable", isFilterable: "isFilterable", userInput: "userInput", suggestedText: "suggestedText", inputAttributes: "inputAttributes", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", onBlur: "onBlur", onFocus: "onFocus", onClick: "onClick", onNavigate: "onNavigate" }, host: { properties: { "class.k-searchbar": "this.searchBarClass" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
693
- <input #input
694
- autocomplete="off"
695
- [id]="id"
696
- [disabled]="disabled"
697
- [readonly]="readonly"
698
- [placeholder]="placeholder"
699
- class="k-input-inner"
700
- (input)="handleInput($event)"
701
- (keydown)="handleKeydown($event)"
702
- [kendoEventsOutsideAngular]="{
703
- focus: handleFocus,
704
- blur: handleBlur
705
- }"
706
- [scope]="this"
707
- [attr.tabIndex]="tabIndex"
708
- [attr.dir]="direction"
709
- [attr.role]="role"
710
- aria-haspopup="listbox"
711
- [attr.aria-expanded]="ariaExpanded"
712
- [attr.aria-controls]="ariaControls"
713
- [attr.aria-describedby]="tagListId"
714
- [attr.aria-activedescendant]="activeDescendant"
715
- [attr.aria-busy]="isLoading"
716
- [attr.aria-invalid]="formControl?.invalid"
717
- [attr.required]="isRequired ? '' : null"
718
- />
719
- `, isInline: true, dependencies: [{ kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
743
+ SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchBarComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.Injector }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
744
+ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchBarComponent, 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 });
720
745
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchBarComponent, decorators: [{
721
746
  type: Component,
722
747
  args: [{
723
- selector: 'kendo-searchbar',
724
- template: `
725
- <input #input
726
- autocomplete="off"
727
- [id]="id"
728
- [disabled]="disabled"
729
- [readonly]="readonly"
730
- [placeholder]="placeholder"
731
- class="k-input-inner"
732
- (input)="handleInput($event)"
733
- (keydown)="handleKeydown($event)"
734
- [kendoEventsOutsideAngular]="{
735
- focus: handleFocus,
736
- blur: handleBlur
737
- }"
738
- [scope]="this"
739
- [attr.tabIndex]="tabIndex"
740
- [attr.dir]="direction"
741
- [attr.role]="role"
742
- aria-haspopup="listbox"
743
- [attr.aria-expanded]="ariaExpanded"
744
- [attr.aria-controls]="ariaControls"
745
- [attr.aria-describedby]="tagListId"
746
- [attr.aria-activedescendant]="activeDescendant"
747
- [attr.aria-busy]="isLoading"
748
- [attr.aria-invalid]="formControl?.invalid"
749
- [attr.required]="isRequired ? '' : null"
750
- />
751
- `
748
+ selector: 'input[kendoSearchbar]',
749
+ template: ``
752
750
  }]
753
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { id: [{
754
- type: Input
755
- }], tagListId: [{
756
- type: Input
757
- }], activeDescendant: [{
758
- type: Input
759
- }], disabled: [{
751
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { tagListId: [{
760
752
  type: Input
761
753
  }], readonly: [{
762
754
  type: Input
763
- }], tabIndex: [{
764
- type: Input
765
- }], role: [{
766
- type: Input
767
- }], isLoading: [{
768
- type: Input
769
- }], ariaControls: [{
770
- type: Input
771
- }], ariaExpanded: [{
755
+ }], disabled: [{
772
756
  type: Input
773
757
  }], isRequired: [{
774
758
  type: Input
@@ -782,6 +766,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
782
766
  type: Input
783
767
  }], inputAttributes: [{
784
768
  type: Input
769
+ }], id: [{
770
+ type: HostBinding,
771
+ args: ['attr.id']
772
+ }, {
773
+ type: Input
774
+ }], activeDescendant: [{
775
+ type: HostBinding,
776
+ args: ['attr.aria-activedescendant']
777
+ }, {
778
+ type: Input
779
+ }], tabIndex: [{
780
+ type: HostBinding,
781
+ args: ['attr.tabindex']
782
+ }, {
783
+ type: Input
784
+ }], isLoading: [{
785
+ type: HostBinding,
786
+ args: ['attr.aria-busy']
787
+ }, {
788
+ type: Input
789
+ }], ariaControls: [{
790
+ type: HostBinding,
791
+ args: ['attr.aria-controls']
792
+ }, {
793
+ type: Input
794
+ }], ariaExpanded: [{
795
+ type: HostBinding,
796
+ args: ['attr.aria-expanded']
797
+ }, {
798
+ type: Input
799
+ }], attrAriaInvalid: [{
800
+ type: HostBinding,
801
+ args: ['attr.aria-invalid']
802
+ }], placeholder: [{
803
+ type: HostBinding,
804
+ args: ['attr.placeholder']
805
+ }, {
806
+ type: Input
807
+ }], role: [{
808
+ type: HostBinding,
809
+ args: ['attr.role']
810
+ }], dir: [{
811
+ type: HostBinding,
812
+ args: ['attr.dir']
785
813
  }], valueChange: [{
786
814
  type: Output
787
815
  }], onBlur: [{
@@ -792,14 +820,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
792
820
  type: Output
793
821
  }], onNavigate: [{
794
822
  type: Output
795
- }], input: [{
796
- type: ViewChild,
797
- args: ['input', { static: true }]
798
- }], searchBarClass: [{
799
- type: HostBinding,
800
- args: ['class.k-searchbar']
801
- }], placeholder: [{
802
- type: Input
803
823
  }] } });
804
824
 
805
825
  /**
@@ -1531,14 +1551,22 @@ class NavigationService {
1531
1551
  const altKey = args.originalEvent.altKey;
1532
1552
  const shiftKey = args.originalEvent.shiftKey;
1533
1553
  const ctrlKey = args.originalEvent.ctrlKey || args.originalEvent.metaKey;
1554
+ const openOnSpace = args.openOnSpace;
1555
+ const closeOnSpace = args.closeOnSpace;
1534
1556
  let index;
1535
1557
  let action = NavigationAction.Undefined;
1536
1558
  if (altKey && keyCode === Keys.ArrowDown) {
1537
1559
  action = NavigationAction.Open;
1538
1560
  }
1561
+ else if (openOnSpace && keyCode === Keys.Space) {
1562
+ action = NavigationAction.Open;
1563
+ }
1539
1564
  else if (altKey && keyCode === Keys.ArrowUp) {
1540
1565
  action = NavigationAction.Close;
1541
1566
  }
1567
+ else if (closeOnSpace && keyCode === Keys.Space) {
1568
+ action = NavigationAction.Close;
1569
+ }
1542
1570
  else if (shiftKey && keyCode === Keys.ArrowUp) {
1543
1571
  action = NavigationAction.SelectPrevious;
1544
1572
  }
@@ -4090,8 +4118,8 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
4090
4118
  </ng-template>
4091
4119
  </span>
4092
4120
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
4093
- <kendo-searchbar #searchbar
4094
- [role]="'combobox'"
4121
+ <input
4122
+ kendoSearchbar
4095
4123
  [ariaExpanded]="isOpen"
4096
4124
  [isSuggestable]="suggest"
4097
4125
  [isFilterable]="filterable"
@@ -4112,7 +4140,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
4112
4140
  (onBlur)="handleInputBlur()"
4113
4141
  (onFocus)="handleInputFocus()"
4114
4142
  (click)="handleClick()"
4115
- ></kendo-searchbar>
4143
+ />
4116
4144
  <span
4117
4145
  *ngIf="!loading && !readonly && (clearButton && text?.length)"
4118
4146
  class="k-clear-value"
@@ -4202,7 +4230,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
4202
4230
  }">
4203
4231
  </ng-template>
4204
4232
  </ng-template>
4205
- `, isInline: true, dependencies: [{ 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", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }, { kind: "component", type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
4233
+ `, isInline: true, dependencies: [{ 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", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }, { 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
4206
4234
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutoCompleteComponent, decorators: [{
4207
4235
  type: Component,
4208
4236
  args: [{
@@ -4253,8 +4281,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
4253
4281
  </ng-template>
4254
4282
  </span>
4255
4283
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
4256
- <kendo-searchbar #searchbar
4257
- [role]="'combobox'"
4284
+ <input
4285
+ kendoSearchbar
4258
4286
  [ariaExpanded]="isOpen"
4259
4287
  [isSuggestable]="suggest"
4260
4288
  [isFilterable]="filterable"
@@ -4275,7 +4303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
4275
4303
  (onBlur)="handleInputBlur()"
4276
4304
  (onFocus)="handleInputFocus()"
4277
4305
  (click)="handleClick()"
4278
- ></kendo-searchbar>
4306
+ />
4279
4307
  <span
4280
4308
  *ngIf="!loading && !readonly && (clearButton && text?.length)"
4281
4309
  class="k-clear-value"
@@ -6090,8 +6118,8 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
6090
6118
  </ng-template>
6091
6119
  </span>
6092
6120
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
6093
- <kendo-searchbar #searchbar
6094
- [role]="'combobox'"
6121
+ <input
6122
+ kendoSearchbar
6095
6123
  [ariaExpanded]="isOpen"
6096
6124
  [ariaControls]="ariaControls"
6097
6125
  [id]="focusableId"
@@ -6112,7 +6140,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
6112
6140
  (onBlur)="handleInputBlur()"
6113
6141
  (onFocus)="handleInputFocus()"
6114
6142
  (click)="handleClick()"
6115
- ></kendo-searchbar>
6143
+ />
6116
6144
  <span
6117
6145
  *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
6118
6146
  class="k-clear-value"
@@ -6222,7 +6250,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
6222
6250
  }">
6223
6251
  </ng-template>
6224
6252
  </ng-template>
6225
- `, isInline: true, dependencies: [{ 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", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }, { kind: "component", type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
6253
+ `, isInline: true, dependencies: [{ 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", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }, { 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
6226
6254
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ComboBoxComponent, decorators: [{
6227
6255
  type: Component,
6228
6256
  args: [{
@@ -6277,8 +6305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
6277
6305
  </ng-template>
6278
6306
  </span>
6279
6307
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
6280
- <kendo-searchbar #searchbar
6281
- [role]="'combobox'"
6308
+ <input
6309
+ kendoSearchbar
6282
6310
  [ariaExpanded]="isOpen"
6283
6311
  [ariaControls]="ariaControls"
6284
6312
  [id]="focusableId"
@@ -6299,7 +6327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
6299
6327
  (onBlur)="handleInputBlur()"
6300
6328
  (onFocus)="handleInputFocus()"
6301
6329
  (click)="handleClick()"
6302
- ></kendo-searchbar>
6330
+ />
6303
6331
  <span
6304
6332
  *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
6305
6333
  class="k-clear-value"
@@ -7210,7 +7238,9 @@ class DropDownListComponent {
7210
7238
  current: focused + offset,
7211
7239
  max: this.dataService.itemsCount - 1,
7212
7240
  min: this.defaultItem ? -1 : 0,
7213
- originalEvent: eventData
7241
+ originalEvent: eventData,
7242
+ openOnSpace: !this.isOpen,
7243
+ closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
7214
7244
  });
7215
7245
  const leftRightKeys = (action === NavigationAction.Left) || (action === NavigationAction.Right) && this.leftRightArrowsNavigation;
7216
7246
  if (action !== NavigationAction.Undefined &&
@@ -10703,12 +10733,11 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
10703
10733
  (removeTag)="handleRemoveTag($event)"
10704
10734
  >
10705
10735
  </kendo-taglist>
10706
- <kendo-searchbar
10707
- #searchbar
10708
- [ariaExpanded]="isOpen"
10736
+ <input
10737
+ kendoSearchbar
10709
10738
  [ariaControls]="ariaControls"
10739
+ [ariaExpanded]="isOpen"
10710
10740
  [id]="focusableId"
10711
- [role]="'combobox'"
10712
10741
  [tagListId]="tagListId"
10713
10742
  [isLoading]="loading"
10714
10743
  [isFilterable]="filterable"
@@ -10725,8 +10754,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
10725
10754
  (onBlur)="handleInputBlur()"
10726
10755
  (onFocus)="handleInputFocus()"
10727
10756
  (click)="handleClick()"
10728
- >
10729
- </kendo-searchbar>
10757
+ />
10730
10758
  </div>
10731
10759
 
10732
10760
  <span
@@ -10851,7 +10879,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
10851
10879
  }">
10852
10880
  </ng-template>
10853
10881
  </ng-template>
10854
- `, isInline: true, dependencies: [{ 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", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "component", type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { 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: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
10882
+ `, isInline: true, dependencies: [{ 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", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { 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: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
10855
10883
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiSelectComponent, decorators: [{
10856
10884
  type: Component,
10857
10885
  args: [{
@@ -10924,12 +10952,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
10924
10952
  (removeTag)="handleRemoveTag($event)"
10925
10953
  >
10926
10954
  </kendo-taglist>
10927
- <kendo-searchbar
10928
- #searchbar
10929
- [ariaExpanded]="isOpen"
10955
+ <input
10956
+ kendoSearchbar
10930
10957
  [ariaControls]="ariaControls"
10958
+ [ariaExpanded]="isOpen"
10931
10959
  [id]="focusableId"
10932
- [role]="'combobox'"
10933
10960
  [tagListId]="tagListId"
10934
10961
  [isLoading]="loading"
10935
10962
  [isFilterable]="filterable"
@@ -10946,8 +10973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
10946
10973
  (onBlur)="handleInputBlur()"
10947
10974
  (onFocus)="handleInputFocus()"
10948
10975
  (click)="handleClick()"
10949
- >
10950
- </kendo-searchbar>
10976
+ />
10951
10977
  </div>
10952
10978
 
10953
10979
  <span
@@ -11569,11 +11595,10 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
11569
11595
  </ng-template>
11570
11596
  </span>
11571
11597
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
11572
- <kendo-searchbar
11573
- #searchbar
11574
- [role]="'combobox'"
11575
- [ariaExpanded]="isOpen"
11598
+ <input
11599
+ kendoSearchbar
11576
11600
  [ariaControls]="ariaControls"
11601
+ [ariaExpanded]="isOpen"
11577
11602
  [id]="focusableId"
11578
11603
  [isLoading]="loading"
11579
11604
  [isSuggestable]="suggest"
@@ -11592,9 +11617,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
11592
11617
  (onBlur)="handleInputBlur()"
11593
11618
  (onFocus)="handleInputFocus()"
11594
11619
  (click)="handleClick()"
11595
- >
11596
- </kendo-searchbar>
11597
-
11620
+ />
11598
11621
  <span
11599
11622
  *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large') && text?.length"
11600
11623
  class="k-clear-value"
@@ -11791,7 +11814,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
11791
11814
  </ng-container>
11792
11815
  </div>
11793
11816
  </ng-template>
11794
- `, isInline: true, dependencies: [{ 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", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }, { kind: "component", type: SearchBarComponent, selector: "kendo-searchbar", inputs: ["id", "tagListId", "activeDescendant", "disabled", "readonly", "tabIndex", "role", "isLoading", "ariaControls", "ariaExpanded", "isRequired", "isSuggestable", "isFilterable", "userInput", "suggestedText", "inputAttributes", "placeholder"], outputs: ["valueChange", "onBlur", "onFocus", "onClick", "onNavigate"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
11817
+ `, isInline: true, dependencies: [{ 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", "data", "size", "rounded"], outputs: ["onClick", "pageChange", "listResize", "popupListScroll"] }, { 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: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: ResponsiveRendererComponent, selector: "responsive-renderer", inputs: ["title", "showActionButtons", "subtitle", "size", "showTextInput", "sharedPopupActionSheetTemplate", "isActionSheetExpanded", "text", "placeholder"], outputs: ["closePopup", "textInputChange", "navigate", "onExpand", "onCollapse", "onApply", "onCancel"] }, { kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i12.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "\n [kendoDropDownListLocalizedMessages],\n [kendoDropDownTreeLocalizedMessages],\n [kendoComboBoxLocalizedMessages],\n [kendoMultiColumnComboBoxLocalizedMessages],\n [kendoAutoCompleteLocalizedMessages],\n [kendoMultiSelectLocalizedMessages],\n [kendoMultiSelectTreeLocalizedMessages]\n " }, { kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: i14.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i12.SeparatorComponent, selector: "kendo-separator", inputs: ["orientation"] }, { kind: "directive", type: SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
11795
11818
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
11796
11819
  type: Component,
11797
11820
  args: [{
@@ -11854,11 +11877,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
11854
11877
  </ng-template>
11855
11878
  </span>
11856
11879
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
11857
- <kendo-searchbar
11858
- #searchbar
11859
- [role]="'combobox'"
11860
- [ariaExpanded]="isOpen"
11880
+ <input
11881
+ kendoSearchbar
11861
11882
  [ariaControls]="ariaControls"
11883
+ [ariaExpanded]="isOpen"
11862
11884
  [id]="focusableId"
11863
11885
  [isLoading]="loading"
11864
11886
  [isSuggestable]="suggest"
@@ -11877,9 +11899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
11877
11899
  (onBlur)="handleInputBlur()"
11878
11900
  (onFocus)="handleInputFocus()"
11879
11901
  (click)="handleClick()"
11880
- >
11881
- </kendo-searchbar>
11882
-
11902
+ />
11883
11903
  <span
11884
11904
  *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large') && text?.length"
11885
11905
  class="k-clear-value"
@@ -12801,7 +12821,7 @@ class DropDownTreeComponent {
12801
12821
  /**
12802
12822
  * @hidden
12803
12823
  */
12804
- handleKeydown(event) {
12824
+ handleKeydown(event, input) {
12805
12825
  if (this.disabled || this.readonly) {
12806
12826
  return;
12807
12827
  }
@@ -12814,7 +12834,9 @@ class DropDownTreeComponent {
12814
12834
  }
12815
12835
  const eventData = event;
12816
12836
  this.navigationService.process({
12817
- originalEvent: eventData
12837
+ originalEvent: eventData,
12838
+ openOnSpace: !this.isOpen,
12839
+ closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
12818
12840
  });
12819
12841
  }
12820
12842
  /**
@@ -13456,8 +13478,9 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
13456
13478
  #filterInput
13457
13479
  (input)="handleFilterInputChange($event.target)"
13458
13480
  [filterInput]="filterable && !touchEnabled"
13459
- (keydown.arrowdown)="handleKeydown($event)"
13460
- (keydown.alt.arrowup)="handleKeydown($event)"
13481
+ (keydown.arrowdown)="handleKeydown($event, filterInput)"
13482
+ (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
13483
+ (keydown.escape)="handleKeydown($event, filterInput)"
13461
13484
  [attr.aria-label]="messageFor('filterInputLabel')"
13462
13485
  [value]="filter"
13463
13486
  class="k-input-inner"
@@ -13661,8 +13684,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
13661
13684
  #filterInput
13662
13685
  (input)="handleFilterInputChange($event.target)"
13663
13686
  [filterInput]="filterable && !touchEnabled"
13664
- (keydown.arrowdown)="handleKeydown($event)"
13665
- (keydown.alt.arrowup)="handleKeydown($event)"
13687
+ (keydown.arrowdown)="handleKeydown($event, filterInput)"
13688
+ (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
13689
+ (keydown.escape)="handleKeydown($event, filterInput)"
13666
13690
  [attr.aria-label]="messageFor('filterInputLabel')"
13667
13691
  [value]="filter"
13668
13692
  class="k-input-inner"
@@ -14669,7 +14693,9 @@ class MultiSelectTreeComponent {
14669
14693
  }
14670
14694
  const eventData = event;
14671
14695
  const action = this.navigationService.process({
14672
- originalEvent: eventData
14696
+ originalEvent: eventData,
14697
+ openOnSpace: !this.isOpen,
14698
+ closeOnSpace: false
14673
14699
  });
14674
14700
  if (action === NavigationAction.Open) {
14675
14701
  eventData.preventDefault();