@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.
- package/common/searchbar.component.d.ts +24 -16
- package/dropdowntrees/dropdowntree.component.d.ts +1 -1
- package/esm2020/autocomplete/autocomplete.component.mjs +7 -7
- package/esm2020/comboboxes/combobox.component.mjs +7 -7
- package/esm2020/comboboxes/multicolumncombobox.component.mjs +9 -15
- package/esm2020/common/navigation/navigation.service.mjs +8 -0
- package/esm2020/common/searchbar.component.mjs +107 -88
- package/esm2020/dropdownlist/dropdownlist.component.mjs +3 -1
- package/esm2020/dropdowntrees/dropdowntree.component.mjs +10 -6
- package/esm2020/dropdowntrees/multiselecttree.component.mjs +3 -1
- package/esm2020/multiselect/multiselect.component.mjs +9 -13
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-dropdowns.mjs +166 -139
- package/fesm2020/progress-kendo-angular-dropdowns.mjs +165 -139
- package/package.json +8 -8
- package/schematics/ngAdd/index.js +2 -2
|
@@ -13,18 +13,15 @@ import * as i0 from "@angular/core";
|
|
|
13
13
|
export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy {
|
|
14
14
|
private localization;
|
|
15
15
|
private injector;
|
|
16
|
+
input: ElementRef<HTMLInputElement>;
|
|
16
17
|
direction: Direction;
|
|
17
|
-
id: string;
|
|
18
18
|
tagListId: string;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
ariaControls: string;
|
|
26
|
-
ariaExpanded: boolean | null;
|
|
27
|
-
isRequired: boolean;
|
|
19
|
+
set readonly(readonly: boolean);
|
|
20
|
+
get readonly(): boolean;
|
|
21
|
+
set disabled(disabled: boolean);
|
|
22
|
+
get disabled(): boolean;
|
|
23
|
+
set isRequired(isRequired: boolean);
|
|
24
|
+
get isRequired(): boolean;
|
|
28
25
|
set isSuggestable(isSuggestable: boolean);
|
|
29
26
|
get isSuggestable(): boolean;
|
|
30
27
|
set isFilterable(isFilterable: boolean);
|
|
@@ -45,16 +42,26 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
|
|
|
45
42
|
get inputAttributes(): {
|
|
46
43
|
[key: string]: string;
|
|
47
44
|
};
|
|
45
|
+
id: string;
|
|
46
|
+
activeDescendant: string;
|
|
47
|
+
tabIndex: number;
|
|
48
|
+
isLoading: boolean;
|
|
49
|
+
ariaControls: string;
|
|
50
|
+
ariaExpanded: boolean | null;
|
|
51
|
+
get attrAriaInvalid(): boolean;
|
|
52
|
+
set placeholder(text: string);
|
|
53
|
+
get placeholder(): string;
|
|
54
|
+
role: string;
|
|
55
|
+
get dir(): string;
|
|
48
56
|
valueChange: EventEmitter<any>;
|
|
49
57
|
onBlur: EventEmitter<any>;
|
|
50
58
|
onFocus: EventEmitter<any>;
|
|
51
59
|
onClick: EventEmitter<any>;
|
|
52
60
|
onNavigate: EventEmitter<any>;
|
|
53
|
-
input: ElementRef<HTMLInputElement>;
|
|
54
|
-
searchBarClass: boolean;
|
|
55
61
|
get value(): string;
|
|
56
|
-
|
|
57
|
-
|
|
62
|
+
private _isRequired;
|
|
63
|
+
private _readonly;
|
|
64
|
+
private _disabled;
|
|
58
65
|
private _userInput;
|
|
59
66
|
private _previousValue;
|
|
60
67
|
private _placeholder;
|
|
@@ -66,9 +73,10 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
|
|
|
66
73
|
private parsedAttributes;
|
|
67
74
|
private get defaultAttributes();
|
|
68
75
|
private get mutableAttributes();
|
|
69
|
-
constructor(localization: LocalizationService, renderer: Renderer2, injector: Injector);
|
|
76
|
+
constructor(localization: LocalizationService, renderer: Renderer2, injector: Injector, input: ElementRef<HTMLInputElement>);
|
|
70
77
|
ngOnInit(): void;
|
|
71
78
|
ngOnChanges(changes: any): void;
|
|
79
|
+
ngAfterViewInit(): void;
|
|
72
80
|
ngOnDestroy(): void;
|
|
73
81
|
private writeInputValue;
|
|
74
82
|
private setInputSelection;
|
|
@@ -82,5 +90,5 @@ export declare class SearchBarComponent implements OnChanges, OnInit, OnDestroy
|
|
|
82
90
|
setInputSize(): void;
|
|
83
91
|
private setInputAttributes;
|
|
84
92
|
static ɵfac: i0.ɵɵFactoryDeclaration<SearchBarComponent, never>;
|
|
85
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "
|
|
93
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SearchBarComponent, "input[kendoSearchbar]", never, { "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"; }, { "valueChange": "valueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "onNavigate": "onNavigate"; }, never, never, false, never>;
|
|
86
94
|
}
|
|
@@ -507,7 +507,7 @@ export declare class DropDownTreeComponent implements OnInit, OnDestroy, OnChang
|
|
|
507
507
|
/**
|
|
508
508
|
* @hidden
|
|
509
509
|
*/
|
|
510
|
-
handleKeydown(event: any): void;
|
|
510
|
+
handleKeydown(event: any, input?: HTMLInputElement): void;
|
|
511
511
|
/**
|
|
512
512
|
* Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
|
|
513
513
|
* The targeted item should be expanded in order for it to be focused.
|
|
@@ -1172,8 +1172,8 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1172
1172
|
</ng-template>
|
|
1173
1173
|
</span>
|
|
1174
1174
|
<kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
|
|
1175
|
-
<
|
|
1176
|
-
|
|
1175
|
+
<input
|
|
1176
|
+
kendoSearchbar
|
|
1177
1177
|
[ariaExpanded]="isOpen"
|
|
1178
1178
|
[isSuggestable]="suggest"
|
|
1179
1179
|
[isFilterable]="filterable"
|
|
@@ -1194,7 +1194,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1194
1194
|
(onBlur)="handleInputBlur()"
|
|
1195
1195
|
(onFocus)="handleInputFocus()"
|
|
1196
1196
|
(click)="handleClick()"
|
|
1197
|
-
|
|
1197
|
+
/>
|
|
1198
1198
|
<span
|
|
1199
1199
|
*ngIf="!loading && !readonly && (clearButton && text?.length)"
|
|
1200
1200
|
class="k-clear-value"
|
|
@@ -1284,7 +1284,7 @@ AutoCompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1284
1284
|
}">
|
|
1285
1285
|
</ng-template>
|
|
1286
1286
|
</ng-template>
|
|
1287
|
-
`, isInline: true, dependencies: [{ kind: "component", type: i7.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: i8.SearchBarComponent, selector: "
|
|
1287
|
+
`, isInline: true, dependencies: [{ kind: "component", type: i7.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: i8.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: i9.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: i10.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: i13.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: i15.SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
|
|
1288
1288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutoCompleteComponent, decorators: [{
|
|
1289
1289
|
type: Component,
|
|
1290
1290
|
args: [{
|
|
@@ -1335,8 +1335,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1335
1335
|
</ng-template>
|
|
1336
1336
|
</span>
|
|
1337
1337
|
<kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
|
|
1338
|
-
<
|
|
1339
|
-
|
|
1338
|
+
<input
|
|
1339
|
+
kendoSearchbar
|
|
1340
1340
|
[ariaExpanded]="isOpen"
|
|
1341
1341
|
[isSuggestable]="suggest"
|
|
1342
1342
|
[isFilterable]="filterable"
|
|
@@ -1357,7 +1357,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1357
1357
|
(onBlur)="handleInputBlur()"
|
|
1358
1358
|
(onFocus)="handleInputFocus()"
|
|
1359
1359
|
(click)="handleClick()"
|
|
1360
|
-
|
|
1360
|
+
/>
|
|
1361
1361
|
<span
|
|
1362
1362
|
*ngIf="!loading && !readonly && (clearButton && text?.length)"
|
|
1363
1363
|
class="k-clear-value"
|
|
@@ -1576,8 +1576,8 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
1576
1576
|
</ng-template>
|
|
1577
1577
|
</span>
|
|
1578
1578
|
<kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
|
|
1579
|
-
<
|
|
1580
|
-
|
|
1579
|
+
<input
|
|
1580
|
+
kendoSearchbar
|
|
1581
1581
|
[ariaExpanded]="isOpen"
|
|
1582
1582
|
[ariaControls]="ariaControls"
|
|
1583
1583
|
[id]="focusableId"
|
|
@@ -1598,7 +1598,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
1598
1598
|
(onBlur)="handleInputBlur()"
|
|
1599
1599
|
(onFocus)="handleInputFocus()"
|
|
1600
1600
|
(click)="handleClick()"
|
|
1601
|
-
|
|
1601
|
+
/>
|
|
1602
1602
|
<span
|
|
1603
1603
|
*ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
|
|
1604
1604
|
class="k-clear-value"
|
|
@@ -1708,7 +1708,7 @@ ComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
1708
1708
|
}">
|
|
1709
1709
|
</ng-template>
|
|
1710
1710
|
</ng-template>
|
|
1711
|
-
`, isInline: true, dependencies: [{ kind: "component", type: i7.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: i8.SearchBarComponent, selector: "
|
|
1711
|
+
`, isInline: true, dependencies: [{ kind: "component", type: i7.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: i8.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: i9.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: i10.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: i13.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: i15.SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
|
|
1712
1712
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ComboBoxComponent, decorators: [{
|
|
1713
1713
|
type: Component,
|
|
1714
1714
|
args: [{
|
|
@@ -1763,8 +1763,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1763
1763
|
</ng-template>
|
|
1764
1764
|
</span>
|
|
1765
1765
|
<kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
|
|
1766
|
-
<
|
|
1767
|
-
|
|
1766
|
+
<input
|
|
1767
|
+
kendoSearchbar
|
|
1768
1768
|
[ariaExpanded]="isOpen"
|
|
1769
1769
|
[ariaControls]="ariaControls"
|
|
1770
1770
|
[id]="focusableId"
|
|
@@ -1785,7 +1785,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1785
1785
|
(onBlur)="handleInputBlur()"
|
|
1786
1786
|
(onFocus)="handleInputFocus()"
|
|
1787
1787
|
(click)="handleClick()"
|
|
1788
|
-
|
|
1788
|
+
/>
|
|
1789
1789
|
<span
|
|
1790
1790
|
*ngIf="clearButton && !loading && !disabled && !readonly && text?.length"
|
|
1791
1791
|
class="k-clear-value"
|
|
@@ -221,11 +221,10 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
|
|
|
221
221
|
</ng-template>
|
|
222
222
|
</span>
|
|
223
223
|
<kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
|
|
224
|
-
<
|
|
225
|
-
|
|
226
|
-
[role]="'combobox'"
|
|
227
|
-
[ariaExpanded]="isOpen"
|
|
224
|
+
<input
|
|
225
|
+
kendoSearchbar
|
|
228
226
|
[ariaControls]="ariaControls"
|
|
227
|
+
[ariaExpanded]="isOpen"
|
|
229
228
|
[id]="focusableId"
|
|
230
229
|
[isLoading]="loading"
|
|
231
230
|
[isSuggestable]="suggest"
|
|
@@ -244,9 +243,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
|
|
|
244
243
|
(onBlur)="handleInputBlur()"
|
|
245
244
|
(onFocus)="handleInputFocus()"
|
|
246
245
|
(click)="handleClick()"
|
|
247
|
-
|
|
248
|
-
</kendo-searchbar>
|
|
249
|
-
|
|
246
|
+
/>
|
|
250
247
|
<span
|
|
251
248
|
*ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large') && text?.length"
|
|
252
249
|
class="k-clear-value"
|
|
@@ -443,7 +440,7 @@ MultiColumnComboBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
|
|
|
443
440
|
</ng-container>
|
|
444
441
|
</div>
|
|
445
442
|
</ng-template>
|
|
446
|
-
`, isInline: true, dependencies: [{ kind: "component", type: i7.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: i8.SearchBarComponent, selector: "
|
|
443
|
+
`, isInline: true, dependencies: [{ kind: "component", type: i7.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: i8.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: i9.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: i10.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: i13.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: i15.SharedDropDownEventsDirective, selector: "[kendoDropDownSharedEvents]", inputs: ["hostElement", "clearButtonClicked", "isFocused"], outputs: ["isFocusedChange", "onFocus", "handleBlur"] }] });
|
|
447
444
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultiColumnComboBoxComponent, decorators: [{
|
|
448
445
|
type: Component,
|
|
449
446
|
args: [{
|
|
@@ -506,11 +503,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
506
503
|
</ng-template>
|
|
507
504
|
</span>
|
|
508
505
|
<kendo-separator *ngIf="prefixTemplate && prefixTemplate.showSeparator"></kendo-separator>
|
|
509
|
-
<
|
|
510
|
-
|
|
511
|
-
[role]="'combobox'"
|
|
512
|
-
[ariaExpanded]="isOpen"
|
|
506
|
+
<input
|
|
507
|
+
kendoSearchbar
|
|
513
508
|
[ariaControls]="ariaControls"
|
|
509
|
+
[ariaExpanded]="isOpen"
|
|
514
510
|
[id]="focusableId"
|
|
515
511
|
[isLoading]="loading"
|
|
516
512
|
[isSuggestable]="suggest"
|
|
@@ -529,9 +525,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
529
525
|
(onBlur)="handleInputBlur()"
|
|
530
526
|
(onFocus)="handleInputFocus()"
|
|
531
527
|
(click)="handleClick()"
|
|
532
|
-
|
|
533
|
-
</kendo-searchbar>
|
|
534
|
-
|
|
528
|
+
/>
|
|
535
529
|
<span
|
|
536
530
|
*ngIf="clearButton && !loading && !disabled && (!readonly || readonly && isAdaptiveModeEnabled && windowSize !== 'large') && text?.length"
|
|
537
531
|
class="k-clear-value"
|
|
@@ -57,14 +57,22 @@ export class NavigationService {
|
|
|
57
57
|
const altKey = args.originalEvent.altKey;
|
|
58
58
|
const shiftKey = args.originalEvent.shiftKey;
|
|
59
59
|
const ctrlKey = args.originalEvent.ctrlKey || args.originalEvent.metaKey;
|
|
60
|
+
const openOnSpace = args.openOnSpace;
|
|
61
|
+
const closeOnSpace = args.closeOnSpace;
|
|
60
62
|
let index;
|
|
61
63
|
let action = NavigationAction.Undefined;
|
|
62
64
|
if (altKey && keyCode === Keys.ArrowDown) {
|
|
63
65
|
action = NavigationAction.Open;
|
|
64
66
|
}
|
|
67
|
+
else if (openOnSpace && keyCode === Keys.Space) {
|
|
68
|
+
action = NavigationAction.Open;
|
|
69
|
+
}
|
|
65
70
|
else if (altKey && keyCode === Keys.ArrowUp) {
|
|
66
71
|
action = NavigationAction.Close;
|
|
67
72
|
}
|
|
73
|
+
else if (closeOnSpace && keyCode === Keys.Space) {
|
|
74
|
+
action = NavigationAction.Close;
|
|
75
|
+
}
|
|
68
76
|
else if (shiftKey && keyCode === Keys.ArrowUp) {
|
|
69
77
|
action = NavigationAction.SelectPrevious;
|
|
70
78
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
|
-
import { Component, Renderer2, Input, Output, EventEmitter,
|
|
5
|
+
import { Component, Renderer2, Input, Output, EventEmitter, ElementRef, HostBinding, Injector } from '@angular/core';
|
|
6
6
|
import { isDocumentAvailable, isObjectPresent, isSafari, removeHTMLAttributes, setHTMLAttributes, Keys, parseAttributes } from '@progress/kendo-angular-common';
|
|
7
7
|
import { combineStr, isJapanese } from './util';
|
|
8
8
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
@@ -10,21 +10,21 @@ import { Subscription } from 'rxjs';
|
|
|
10
10
|
import { NgControl } from '@angular/forms';
|
|
11
11
|
import * as i0 from "@angular/core";
|
|
12
12
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
13
|
-
import * as i2 from "@progress/kendo-angular-common";
|
|
14
13
|
/**
|
|
15
14
|
* @hidden
|
|
16
15
|
*/
|
|
17
16
|
export class SearchBarComponent {
|
|
18
|
-
constructor(localization, renderer, injector) {
|
|
17
|
+
constructor(localization, renderer, injector, input) {
|
|
19
18
|
this.localization = localization;
|
|
20
19
|
this.injector = injector;
|
|
20
|
+
this.input = input;
|
|
21
21
|
this.ariaExpanded = null;
|
|
22
|
+
this.role = 'combobox';
|
|
22
23
|
this.valueChange = new EventEmitter();
|
|
23
24
|
this.onBlur = new EventEmitter();
|
|
24
25
|
this.onFocus = new EventEmitter();
|
|
25
26
|
this.onClick = new EventEmitter();
|
|
26
27
|
this.onNavigate = new EventEmitter();
|
|
27
|
-
this.searchBarClass = true;
|
|
28
28
|
this._userInput = "";
|
|
29
29
|
this._previousValue = "";
|
|
30
30
|
this._placeholder = "";
|
|
@@ -34,6 +34,45 @@ export class SearchBarComponent {
|
|
|
34
34
|
this.parsedAttributes = {};
|
|
35
35
|
this.direction = localization.rtl ? 'rtl' : 'ltr';
|
|
36
36
|
this.renderer = renderer;
|
|
37
|
+
this.renderer.addClass(this.input.nativeElement, 'k-input-inner');
|
|
38
|
+
this.renderer.setAttribute(this.input.nativeElement, 'aria-haspopup', 'listbox');
|
|
39
|
+
this.renderer.setAttribute(this.input.nativeElement, 'autocomplete', 'off');
|
|
40
|
+
}
|
|
41
|
+
set readonly(readonly) {
|
|
42
|
+
this._readonly = readonly;
|
|
43
|
+
if (this._readonly) {
|
|
44
|
+
this.renderer.setAttribute(this.input.nativeElement, 'readonly', '');
|
|
45
|
+
}
|
|
46
|
+
else {
|
|
47
|
+
this.renderer.removeAttribute(this.input.nativeElement, 'readonly');
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
get readonly() {
|
|
51
|
+
return this._readonly;
|
|
52
|
+
}
|
|
53
|
+
set disabled(disabled) {
|
|
54
|
+
this._disabled = disabled;
|
|
55
|
+
if (this._disabled) {
|
|
56
|
+
this.renderer.setAttribute(this.input.nativeElement, 'disabled', '');
|
|
57
|
+
}
|
|
58
|
+
else {
|
|
59
|
+
this.renderer.removeAttribute(this.input.nativeElement, 'disabled');
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
get disabled() {
|
|
63
|
+
return this._disabled;
|
|
64
|
+
}
|
|
65
|
+
set isRequired(isRequired) {
|
|
66
|
+
this._isRequired = isRequired;
|
|
67
|
+
if (this._isRequired) {
|
|
68
|
+
this.renderer.setAttribute(this.input.nativeElement, 'required', '');
|
|
69
|
+
}
|
|
70
|
+
else {
|
|
71
|
+
this.renderer.removeAttribute(this.input.nativeElement, 'required');
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
get isRequired() {
|
|
75
|
+
return this._isRequired;
|
|
37
76
|
}
|
|
38
77
|
set isSuggestable(isSuggestable) {
|
|
39
78
|
this._isSuggestable = isSuggestable;
|
|
@@ -78,8 +117,8 @@ export class SearchBarComponent {
|
|
|
78
117
|
get inputAttributes() {
|
|
79
118
|
return this._inputAttributes;
|
|
80
119
|
}
|
|
81
|
-
get
|
|
82
|
-
return this.
|
|
120
|
+
get attrAriaInvalid() {
|
|
121
|
+
return this.formControl?.invalid;
|
|
83
122
|
}
|
|
84
123
|
set placeholder(text) {
|
|
85
124
|
this._placeholder = text || '';
|
|
@@ -88,6 +127,12 @@ export class SearchBarComponent {
|
|
|
88
127
|
get placeholder() {
|
|
89
128
|
return this._placeholder;
|
|
90
129
|
}
|
|
130
|
+
get dir() {
|
|
131
|
+
return this.direction;
|
|
132
|
+
}
|
|
133
|
+
get value() {
|
|
134
|
+
return this.input.nativeElement.value;
|
|
135
|
+
}
|
|
91
136
|
get defaultAttributes() {
|
|
92
137
|
return {
|
|
93
138
|
id: this.id,
|
|
@@ -152,6 +197,12 @@ export class SearchBarComponent {
|
|
|
152
197
|
this._previousValue = this.userInput;
|
|
153
198
|
}
|
|
154
199
|
}
|
|
200
|
+
ngAfterViewInit() {
|
|
201
|
+
this.subs.add(this.input.nativeElement.addEventListener('input', (event) => this.handleInput(event)));
|
|
202
|
+
this.subs.add(this.input.nativeElement.addEventListener('focus', (event) => this.handleFocus(event)));
|
|
203
|
+
this.subs.add(this.input.nativeElement.addEventListener('blur', (event) => this.handleBlur(event)));
|
|
204
|
+
this.subs.add(this.input.nativeElement.addEventListener('keydown', (event) => this.handleKeydown(event)));
|
|
205
|
+
}
|
|
155
206
|
ngOnDestroy() {
|
|
156
207
|
this.subs.unsubscribe();
|
|
157
208
|
}
|
|
@@ -230,87 +281,19 @@ export class SearchBarComponent {
|
|
|
230
281
|
setHTMLAttributes(attributesToRender, this.renderer, this.input.nativeElement);
|
|
231
282
|
}
|
|
232
283
|
}
|
|
233
|
-
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 });
|
|
234
|
-
SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchBarComponent, selector: "
|
|
235
|
-
<input #input
|
|
236
|
-
autocomplete="off"
|
|
237
|
-
[id]="id"
|
|
238
|
-
[disabled]="disabled"
|
|
239
|
-
[readonly]="readonly"
|
|
240
|
-
[placeholder]="placeholder"
|
|
241
|
-
class="k-input-inner"
|
|
242
|
-
(input)="handleInput($event)"
|
|
243
|
-
(keydown)="handleKeydown($event)"
|
|
244
|
-
[kendoEventsOutsideAngular]="{
|
|
245
|
-
focus: handleFocus,
|
|
246
|
-
blur: handleBlur
|
|
247
|
-
}"
|
|
248
|
-
[scope]="this"
|
|
249
|
-
[attr.tabIndex]="tabIndex"
|
|
250
|
-
[attr.dir]="direction"
|
|
251
|
-
[attr.role]="role"
|
|
252
|
-
aria-haspopup="listbox"
|
|
253
|
-
[attr.aria-expanded]="ariaExpanded"
|
|
254
|
-
[attr.aria-controls]="ariaControls"
|
|
255
|
-
[attr.aria-describedby]="tagListId"
|
|
256
|
-
[attr.aria-activedescendant]="activeDescendant"
|
|
257
|
-
[attr.aria-busy]="isLoading"
|
|
258
|
-
[attr.aria-invalid]="formControl?.invalid"
|
|
259
|
-
[attr.required]="isRequired ? '' : null"
|
|
260
|
-
/>
|
|
261
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: i2.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
|
|
284
|
+
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 });
|
|
285
|
+
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 });
|
|
262
286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
263
287
|
type: Component,
|
|
264
288
|
args: [{
|
|
265
|
-
selector: '
|
|
266
|
-
template:
|
|
267
|
-
<input #input
|
|
268
|
-
autocomplete="off"
|
|
269
|
-
[id]="id"
|
|
270
|
-
[disabled]="disabled"
|
|
271
|
-
[readonly]="readonly"
|
|
272
|
-
[placeholder]="placeholder"
|
|
273
|
-
class="k-input-inner"
|
|
274
|
-
(input)="handleInput($event)"
|
|
275
|
-
(keydown)="handleKeydown($event)"
|
|
276
|
-
[kendoEventsOutsideAngular]="{
|
|
277
|
-
focus: handleFocus,
|
|
278
|
-
blur: handleBlur
|
|
279
|
-
}"
|
|
280
|
-
[scope]="this"
|
|
281
|
-
[attr.tabIndex]="tabIndex"
|
|
282
|
-
[attr.dir]="direction"
|
|
283
|
-
[attr.role]="role"
|
|
284
|
-
aria-haspopup="listbox"
|
|
285
|
-
[attr.aria-expanded]="ariaExpanded"
|
|
286
|
-
[attr.aria-controls]="ariaControls"
|
|
287
|
-
[attr.aria-describedby]="tagListId"
|
|
288
|
-
[attr.aria-activedescendant]="activeDescendant"
|
|
289
|
-
[attr.aria-busy]="isLoading"
|
|
290
|
-
[attr.aria-invalid]="formControl?.invalid"
|
|
291
|
-
[attr.required]="isRequired ? '' : null"
|
|
292
|
-
/>
|
|
293
|
-
`
|
|
289
|
+
selector: 'input[kendoSearchbar]',
|
|
290
|
+
template: ``
|
|
294
291
|
}]
|
|
295
|
-
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }]; }, propDecorators: {
|
|
296
|
-
type: Input
|
|
297
|
-
}], tagListId: [{
|
|
298
|
-
type: Input
|
|
299
|
-
}], activeDescendant: [{
|
|
300
|
-
type: Input
|
|
301
|
-
}], disabled: [{
|
|
292
|
+
}], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.Injector }, { type: i0.ElementRef }]; }, propDecorators: { tagListId: [{
|
|
302
293
|
type: Input
|
|
303
294
|
}], readonly: [{
|
|
304
295
|
type: Input
|
|
305
|
-
}],
|
|
306
|
-
type: Input
|
|
307
|
-
}], role: [{
|
|
308
|
-
type: Input
|
|
309
|
-
}], isLoading: [{
|
|
310
|
-
type: Input
|
|
311
|
-
}], ariaControls: [{
|
|
312
|
-
type: Input
|
|
313
|
-
}], ariaExpanded: [{
|
|
296
|
+
}], disabled: [{
|
|
314
297
|
type: Input
|
|
315
298
|
}], isRequired: [{
|
|
316
299
|
type: Input
|
|
@@ -324,6 +307,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
324
307
|
type: Input
|
|
325
308
|
}], inputAttributes: [{
|
|
326
309
|
type: Input
|
|
310
|
+
}], id: [{
|
|
311
|
+
type: HostBinding,
|
|
312
|
+
args: ['attr.id']
|
|
313
|
+
}, {
|
|
314
|
+
type: Input
|
|
315
|
+
}], activeDescendant: [{
|
|
316
|
+
type: HostBinding,
|
|
317
|
+
args: ['attr.aria-activedescendant']
|
|
318
|
+
}, {
|
|
319
|
+
type: Input
|
|
320
|
+
}], tabIndex: [{
|
|
321
|
+
type: HostBinding,
|
|
322
|
+
args: ['attr.tabindex']
|
|
323
|
+
}, {
|
|
324
|
+
type: Input
|
|
325
|
+
}], isLoading: [{
|
|
326
|
+
type: HostBinding,
|
|
327
|
+
args: ['attr.aria-busy']
|
|
328
|
+
}, {
|
|
329
|
+
type: Input
|
|
330
|
+
}], ariaControls: [{
|
|
331
|
+
type: HostBinding,
|
|
332
|
+
args: ['attr.aria-controls']
|
|
333
|
+
}, {
|
|
334
|
+
type: Input
|
|
335
|
+
}], ariaExpanded: [{
|
|
336
|
+
type: HostBinding,
|
|
337
|
+
args: ['attr.aria-expanded']
|
|
338
|
+
}, {
|
|
339
|
+
type: Input
|
|
340
|
+
}], attrAriaInvalid: [{
|
|
341
|
+
type: HostBinding,
|
|
342
|
+
args: ['attr.aria-invalid']
|
|
343
|
+
}], placeholder: [{
|
|
344
|
+
type: HostBinding,
|
|
345
|
+
args: ['attr.placeholder']
|
|
346
|
+
}, {
|
|
347
|
+
type: Input
|
|
348
|
+
}], role: [{
|
|
349
|
+
type: HostBinding,
|
|
350
|
+
args: ['attr.role']
|
|
351
|
+
}], dir: [{
|
|
352
|
+
type: HostBinding,
|
|
353
|
+
args: ['attr.dir']
|
|
327
354
|
}], valueChange: [{
|
|
328
355
|
type: Output
|
|
329
356
|
}], onBlur: [{
|
|
@@ -334,12 +361,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
334
361
|
type: Output
|
|
335
362
|
}], onNavigate: [{
|
|
336
363
|
type: Output
|
|
337
|
-
}], input: [{
|
|
338
|
-
type: ViewChild,
|
|
339
|
-
args: ['input', { static: true }]
|
|
340
|
-
}], searchBarClass: [{
|
|
341
|
-
type: HostBinding,
|
|
342
|
-
args: ['class.k-searchbar']
|
|
343
|
-
}], placeholder: [{
|
|
344
|
-
type: Input
|
|
345
364
|
}] } });
|
|
@@ -621,7 +621,9 @@ export class DropDownListComponent {
|
|
|
621
621
|
current: focused + offset,
|
|
622
622
|
max: this.dataService.itemsCount - 1,
|
|
623
623
|
min: this.defaultItem ? -1 : 0,
|
|
624
|
-
originalEvent: eventData
|
|
624
|
+
originalEvent: eventData,
|
|
625
|
+
openOnSpace: !this.isOpen,
|
|
626
|
+
closeOnSpace: this.isOpen && !input && !(event.target instanceof HTMLInputElement)
|
|
625
627
|
});
|
|
626
628
|
const leftRightKeys = (action === NavigationAction.Left) || (action === NavigationAction.Right) && this.leftRightArrowsNavigation;
|
|
627
629
|
if (action !== NavigationAction.Undefined &&
|