@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, InjectionToken, HostListener, ViewChildren, forwardRef, isDevMode, ViewContainerRef, Optional, Inject, ContentChild, ContentChildren, ChangeDetectionStrategy, NgModule } from '@angular/core';
6
+ import { EventEmitter, Component, Input, HostBinding, Output, Directive, Injectable, InjectionToken, ViewChild, HostListener, ViewChildren, 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,9 @@ 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
+ var _a;
581
+ return (_a = this.formControl) === null || _a === void 0 ? void 0 : _a.invalid;
541
582
  }
542
583
  set placeholder(text) {
543
584
  this._placeholder = text || '';
@@ -546,6 +587,12 @@ class SearchBarComponent {
546
587
  get placeholder() {
547
588
  return this._placeholder;
548
589
  }
590
+ get dir() {
591
+ return this.direction;
592
+ }
593
+ get value() {
594
+ return this.input.nativeElement.value;
595
+ }
549
596
  get defaultAttributes() {
550
597
  var _a;
551
598
  return {
@@ -611,6 +658,12 @@ class SearchBarComponent {
611
658
  this._previousValue = this.userInput;
612
659
  }
613
660
  }
661
+ ngAfterViewInit() {
662
+ this.subs.add(this.input.nativeElement.addEventListener('input', (event) => this.handleInput(event)));
663
+ this.subs.add(this.input.nativeElement.addEventListener('focus', (event) => this.handleFocus(event)));
664
+ this.subs.add(this.input.nativeElement.addEventListener('blur', (event) => this.handleBlur(event)));
665
+ this.subs.add(this.input.nativeElement.addEventListener('keydown', (event) => this.handleKeydown(event)));
666
+ }
614
667
  ngOnDestroy() {
615
668
  this.subs.unsubscribe();
616
669
  }
@@ -689,87 +742,19 @@ class SearchBarComponent {
689
742
  setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement);
690
743
  }
691
744
  }
692
- 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 });
693
- 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: `
694
- <input #input
695
- autocomplete="off"
696
- [id]="id"
697
- [disabled]="disabled"
698
- [readonly]="readonly"
699
- [placeholder]="placeholder"
700
- class="k-input-inner"
701
- (input)="handleInput($event)"
702
- (keydown)="handleKeydown($event)"
703
- [kendoEventsOutsideAngular]="{
704
- focus: handleFocus,
705
- blur: handleBlur
706
- }"
707
- [scope]="this"
708
- [attr.tabIndex]="tabIndex"
709
- [attr.dir]="direction"
710
- [attr.role]="role"
711
- aria-haspopup="listbox"
712
- [attr.aria-expanded]="ariaExpanded"
713
- [attr.aria-controls]="ariaControls"
714
- [attr.aria-describedby]="tagListId"
715
- [attr.aria-activedescendant]="activeDescendant"
716
- [attr.aria-busy]="isLoading"
717
- [attr.aria-invalid]="formControl?.invalid"
718
- [attr.required]="isRequired ? '' : null"
719
- />
720
- `, isInline: true, dependencies: [{ kind: "directive", type: i12.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
745
+ 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 });
746
+ 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 });
721
747
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchBarComponent, decorators: [{
722
748
  type: Component,
723
749
  args: [{
724
- selector: 'kendo-searchbar',
725
- template: `
726
- <input #input
727
- autocomplete="off"
728
- [id]="id"
729
- [disabled]="disabled"
730
- [readonly]="readonly"
731
- [placeholder]="placeholder"
732
- class="k-input-inner"
733
- (input)="handleInput($event)"
734
- (keydown)="handleKeydown($event)"
735
- [kendoEventsOutsideAngular]="{
736
- focus: handleFocus,
737
- blur: handleBlur
738
- }"
739
- [scope]="this"
740
- [attr.tabIndex]="tabIndex"
741
- [attr.dir]="direction"
742
- [attr.role]="role"
743
- aria-haspopup="listbox"
744
- [attr.aria-expanded]="ariaExpanded"
745
- [attr.aria-controls]="ariaControls"
746
- [attr.aria-describedby]="tagListId"
747
- [attr.aria-activedescendant]="activeDescendant"
748
- [attr.aria-busy]="isLoading"
749
- [attr.aria-invalid]="formControl?.invalid"
750
- [attr.required]="isRequired ? '' : null"
751
- />
752
- `
750
+ selector: 'input[kendoSearchbar]',
751
+ template: ``
753
752
  }]
754
- }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: { id: [{
755
- type: Input
756
- }], tagListId: [{
757
- type: Input
758
- }], activeDescendant: [{
759
- type: Input
760
- }], disabled: [{
753
+ }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { tagListId: [{
761
754
  type: Input
762
755
  }], readonly: [{
763
756
  type: Input
764
- }], tabIndex: [{
765
- type: Input
766
- }], role: [{
767
- type: Input
768
- }], isLoading: [{
769
- type: Input
770
- }], ariaControls: [{
771
- type: Input
772
- }], ariaExpanded: [{
757
+ }], disabled: [{
773
758
  type: Input
774
759
  }], isRequired: [{
775
760
  type: Input
@@ -783,6 +768,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
783
768
  type: Input
784
769
  }], inputAttributes: [{
785
770
  type: Input
771
+ }], id: [{
772
+ type: HostBinding,
773
+ args: ['attr.id']
774
+ }, {
775
+ type: Input
776
+ }], activeDescendant: [{
777
+ type: HostBinding,
778
+ args: ['attr.aria-activedescendant']
779
+ }, {
780
+ type: Input
781
+ }], tabIndex: [{
782
+ type: HostBinding,
783
+ args: ['attr.tabindex']
784
+ }, {
785
+ type: Input
786
+ }], isLoading: [{
787
+ type: HostBinding,
788
+ args: ['attr.aria-busy']
789
+ }, {
790
+ type: Input
791
+ }], ariaControls: [{
792
+ type: HostBinding,
793
+ args: ['attr.aria-controls']
794
+ }, {
795
+ type: Input
796
+ }], ariaExpanded: [{
797
+ type: HostBinding,
798
+ args: ['attr.aria-expanded']
799
+ }, {
800
+ type: Input
801
+ }], attrAriaInvalid: [{
802
+ type: HostBinding,
803
+ args: ['attr.aria-invalid']
804
+ }], placeholder: [{
805
+ type: HostBinding,
806
+ args: ['attr.placeholder']
807
+ }, {
808
+ type: Input
809
+ }], role: [{
810
+ type: HostBinding,
811
+ args: ['attr.role']
812
+ }], dir: [{
813
+ type: HostBinding,
814
+ args: ['attr.dir']
786
815
  }], valueChange: [{
787
816
  type: Output
788
817
  }], onBlur: [{
@@ -793,14 +822,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
793
822
  type: Output
794
823
  }], onNavigate: [{
795
824
  type: Output
796
- }], input: [{
797
- type: ViewChild,
798
- args: ['input', { static: true }]
799
- }], searchBarClass: [{
800
- type: HostBinding,
801
- args: ['class.k-searchbar']
802
- }], placeholder: [{
803
- type: Input
804
825
  }] } });
805
826
 
806
827
  /**
@@ -1532,14 +1553,22 @@ class NavigationService {
1532
1553
  const altKey = args.originalEvent.altKey;
1533
1554
  const shiftKey = args.originalEvent.shiftKey;
1534
1555
  const ctrlKey = args.originalEvent.ctrlKey || args.originalEvent.metaKey;
1556
+ const openOnSpace = args.openOnSpace;
1557
+ const closeOnSpace = args.closeOnSpace;
1535
1558
  let index;
1536
1559
  let action = NavigationAction.Undefined;
1537
1560
  if (altKey && keyCode === Keys.ArrowDown) {
1538
1561
  action = NavigationAction.Open;
1539
1562
  }
1563
+ else if (openOnSpace && keyCode === Keys.Space) {
1564
+ action = NavigationAction.Open;
1565
+ }
1540
1566
  else if (altKey && keyCode === Keys.ArrowUp) {
1541
1567
  action = NavigationAction.Close;
1542
1568
  }
1569
+ else if (closeOnSpace && keyCode === Keys.Space) {
1570
+ action = NavigationAction.Close;
1571
+ }
1543
1572
  else if (shiftKey && keyCode === Keys.ArrowUp) {
1544
1573
  action = NavigationAction.SelectPrevious;
1545
1574
  }
@@ -4096,8 +4125,8 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
4096
4125
  </ng-template>
4097
4126
  </span>
4098
4127
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
4099
- <kendo-searchbar #searchbar
4100
- [role]="'combobox'"
4128
+ <input
4129
+ kendoSearchbar
4101
4130
  [ariaExpanded]="isOpen"
4102
4131
  [isSuggestable]="suggest"
4103
4132
  [isFilterable]="filterable"
@@ -4118,7 +4147,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
4118
4147
  (onBlur)="handleInputBlur()"
4119
4148
  (onFocus)="handleInputFocus()"
4120
4149
  (click)="handleClick()"
4121
- ></kendo-searchbar>
4150
+ />
4122
4151
  <span
4123
4152
  *ngIf="!loading && !readonly && (clearButton && text?.length)"
4124
4153
  class="k-clear-value"
@@ -4208,7 +4237,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
4208
4237
  }">
4209
4238
  </ng-template>
4210
4239
  </ng-template>
4211
- `, 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"] }] });
4240
+ `, 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"] }] });
4212
4241
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutoCompleteComponent, decorators: [{
4213
4242
  type: Component,
4214
4243
  args: [{
@@ -4259,8 +4288,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
4259
4288
  </ng-template>
4260
4289
  </span>
4261
4290
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
4262
- <kendo-searchbar #searchbar
4263
- [role]="'combobox'"
4291
+ <input
4292
+ kendoSearchbar
4264
4293
  [ariaExpanded]="isOpen"
4265
4294
  [isSuggestable]="suggest"
4266
4295
  [isFilterable]="filterable"
@@ -4281,7 +4310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
4281
4310
  (onBlur)="handleInputBlur()"
4282
4311
  (onFocus)="handleInputFocus()"
4283
4312
  (click)="handleClick()"
4284
- ></kendo-searchbar>
4313
+ />
4285
4314
  <span
4286
4315
  *ngIf="!loading && !readonly && (clearButton && text?.length)"
4287
4316
  class="k-clear-value"
@@ -6102,8 +6131,8 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
6102
6131
  </ng-template>
6103
6132
  </span>
6104
6133
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
6105
- <kendo-searchbar #searchbar
6106
- [role]="'combobox'"
6134
+ <input
6135
+ kendoSearchbar
6107
6136
  [ariaExpanded]="isOpen"
6108
6137
  [ariaControls]="ariaControls"
6109
6138
  [id]="focusableId"
@@ -6124,7 +6153,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
6124
6153
  (onBlur)="handleInputBlur()"
6125
6154
  (onFocus)="handleInputFocus()"
6126
6155
  (click)="handleClick()"
6127
- ></kendo-searchbar>
6156
+ />
6128
6157
  <span
6129
6158
  *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
6130
6159
  class="k-clear-value"
@@ -6234,7 +6263,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
6234
6263
  }">
6235
6264
  </ng-template>
6236
6265
  </ng-template>
6237
- `, 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"] }] });
6266
+ `, 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"] }] });
6238
6267
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ComboBoxComponent, decorators: [{
6239
6268
  type: Component,
6240
6269
  args: [{
@@ -6289,8 +6318,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
6289
6318
  </ng-template>
6290
6319
  </span>
6291
6320
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
6292
- <kendo-searchbar #searchbar
6293
- [role]="'combobox'"
6321
+ <input
6322
+ kendoSearchbar
6294
6323
  [ariaExpanded]="isOpen"
6295
6324
  [ariaControls]="ariaControls"
6296
6325
  [id]="focusableId"
@@ -6311,7 +6340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
6311
6340
  (onBlur)="handleInputBlur()"
6312
6341
  (onFocus)="handleInputFocus()"
6313
6342
  (click)="handleClick()"
6314
- ></kendo-searchbar>
6343
+ />
6315
6344
  <span
6316
6345
  *ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
6317
6346
  class="k-clear-value"
@@ -7228,7 +7257,9 @@ class DropDownListComponent {
7228
7257
  current: focused + offset,
7229
7258
  max: this.dataService.itemsCount - 1,
7230
7259
  min: this.defaultItem ? -1 : 0,
7231
- originalEvent: eventData
7260
+ originalEvent: eventData,
7261
+ openOnSpace: !this.isOpen,
7262
+ closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
7232
7263
  });
7233
7264
  const leftRightKeys = (action === NavigationAction.Left) || (action === NavigationAction.Right) && this.leftRightArrowsNavigation;
7234
7265
  if (action !== NavigationAction.Undefined &&
@@ -10728,12 +10759,11 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
10728
10759
  (removeTag)="handleRemoveTag($event)"
10729
10760
  >
10730
10761
  </kendo-taglist>
10731
- <kendo-searchbar
10732
- #searchbar
10733
- [ariaExpanded]="isOpen"
10762
+ <input
10763
+ kendoSearchbar
10734
10764
  [ariaControls]="ariaControls"
10765
+ [ariaExpanded]="isOpen"
10735
10766
  [id]="focusableId"
10736
- [role]="'combobox'"
10737
10767
  [tagListId]="tagListId"
10738
10768
  [isLoading]="loading"
10739
10769
  [isFilterable]="filterable"
@@ -10750,8 +10780,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
10750
10780
  (onBlur)="handleInputBlur()"
10751
10781
  (onFocus)="handleInputFocus()"
10752
10782
  (click)="handleClick()"
10753
- >
10754
- </kendo-searchbar>
10783
+ />
10755
10784
  </div>
10756
10785
 
10757
10786
  <span
@@ -10876,7 +10905,7 @@ MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
10876
10905
  }">
10877
10906
  </ng-template>
10878
10907
  </ng-template>
10879
- `, 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"] }] });
10908
+ `, 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"] }] });
10880
10909
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiSelectComponent, decorators: [{
10881
10910
  type: Component,
10882
10911
  args: [{
@@ -10949,12 +10978,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
10949
10978
  (removeTag)="handleRemoveTag($event)"
10950
10979
  >
10951
10980
  </kendo-taglist>
10952
- <kendo-searchbar
10953
- #searchbar
10954
- [ariaExpanded]="isOpen"
10981
+ <input
10982
+ kendoSearchbar
10955
10983
  [ariaControls]="ariaControls"
10984
+ [ariaExpanded]="isOpen"
10956
10985
  [id]="focusableId"
10957
- [role]="'combobox'"
10958
10986
  [tagListId]="tagListId"
10959
10987
  [isLoading]="loading"
10960
10988
  [isFilterable]="filterable"
@@ -10971,8 +10999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
10971
10999
  (onBlur)="handleInputBlur()"
10972
11000
  (onFocus)="handleInputFocus()"
10973
11001
  (click)="handleClick()"
10974
- >
10975
- </kendo-searchbar>
11002
+ />
10976
11003
  </div>
10977
11004
 
10978
11005
  <span
@@ -11596,11 +11623,10 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
11596
11623
  </ng-template>
11597
11624
  </span>
11598
11625
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
11599
- <kendo-searchbar
11600
- #searchbar
11601
- [role]="'combobox'"
11602
- [ariaExpanded]="isOpen"
11626
+ <input
11627
+ kendoSearchbar
11603
11628
  [ariaControls]="ariaControls"
11629
+ [ariaExpanded]="isOpen"
11604
11630
  [id]="focusableId"
11605
11631
  [isLoading]="loading"
11606
11632
  [isSuggestable]="suggest"
@@ -11619,9 +11645,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
11619
11645
  (onBlur)="handleInputBlur()"
11620
11646
  (onFocus)="handleInputFocus()"
11621
11647
  (click)="handleClick()"
11622
- >
11623
- </kendo-searchbar>
11624
-
11648
+ />
11625
11649
  <span
11626
11650
  *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large') && text?.length"
11627
11651
  class="k-clear-value"
@@ -11818,7 +11842,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
11818
11842
  </ng-container>
11819
11843
  </div>
11820
11844
  </ng-template>
11821
- `, 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"] }] });
11845
+ `, 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"] }] });
11822
11846
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
11823
11847
  type: Component,
11824
11848
  args: [{
@@ -11881,11 +11905,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
11881
11905
  </ng-template>
11882
11906
  </span>
11883
11907
  <kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
11884
- <kendo-searchbar
11885
- #searchbar
11886
- [role]="'combobox'"
11887
- [ariaExpanded]="isOpen"
11908
+ <input
11909
+ kendoSearchbar
11888
11910
  [ariaControls]="ariaControls"
11911
+ [ariaExpanded]="isOpen"
11889
11912
  [id]="focusableId"
11890
11913
  [isLoading]="loading"
11891
11914
  [isSuggestable]="suggest"
@@ -11904,9 +11927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
11904
11927
  (onBlur)="handleInputBlur()"
11905
11928
  (onFocus)="handleInputFocus()"
11906
11929
  (click)="handleClick()"
11907
- >
11908
- </kendo-searchbar>
11909
-
11930
+ />
11910
11931
  <span
11911
11932
  *ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large') && text?.length"
11912
11933
  class="k-clear-value"
@@ -12834,7 +12855,7 @@ class DropDownTreeComponent {
12834
12855
  /**
12835
12856
  * @hidden
12836
12857
  */
12837
- handleKeydown(event) {
12858
+ handleKeydown(event, input) {
12838
12859
  var _a;
12839
12860
  if (this.disabled || this.readonly) {
12840
12861
  return;
@@ -12848,7 +12869,9 @@ class DropDownTreeComponent {
12848
12869
  }
12849
12870
  const eventData = event;
12850
12871
  this.navigationService.process({
12851
- originalEvent: eventData
12872
+ originalEvent: eventData,
12873
+ openOnSpace: !this.isOpen,
12874
+ closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
12852
12875
  });
12853
12876
  }
12854
12877
  /**
@@ -13490,8 +13513,9 @@ DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
13490
13513
  #filterInput
13491
13514
  (input)="handleFilterInputChange($event.target)"
13492
13515
  [filterInput]="filterable && !touchEnabled"
13493
- (keydown.arrowdown)="handleKeydown($event)"
13494
- (keydown.alt.arrowup)="handleKeydown($event)"
13516
+ (keydown.arrowdown)="handleKeydown($event, filterInput)"
13517
+ (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
13518
+ (keydown.escape)="handleKeydown($event, filterInput)"
13495
13519
  [attr.aria-label]="messageFor('filterInputLabel')"
13496
13520
  [value]="filter"
13497
13521
  class="k-input-inner"
@@ -13695,8 +13719,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
13695
13719
  #filterInput
13696
13720
  (input)="handleFilterInputChange($event.target)"
13697
13721
  [filterInput]="filterable && !touchEnabled"
13698
- (keydown.arrowdown)="handleKeydown($event)"
13699
- (keydown.alt.arrowup)="handleKeydown($event)"
13722
+ (keydown.arrowdown)="handleKeydown($event, filterInput)"
13723
+ (keydown.alt.arrowup)="handleKeydown($event, filterInput)"
13724
+ (keydown.escape)="handleKeydown($event, filterInput)"
13700
13725
  [attr.aria-label]="messageFor('filterInputLabel')"
13701
13726
  [value]="filter"
13702
13727
  class="k-input-inner"
@@ -14706,7 +14731,9 @@ class MultiSelectTreeComponent {
14706
14731
  }
14707
14732
  const eventData = event;
14708
14733
  const action = this.navigationService.process({
14709
- originalEvent: eventData
14734
+ originalEvent: eventData,
14735
+ openOnSpace: !this.isOpen,
14736
+ closeOnSpace: false
14710
14737
  });
14711
14738
  if (action === NavigationAction.Open) {
14712
14739
  eventData.preventDefault();