@progress/kendo-angular-dropdowns 11.0.0-develop.98 → 11.0.0
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/NOTICE.txt +17 -17
- package/dropdowntrees/dropdowntree.component.d.ts +14 -9
- package/dropdowntrees/multiselecttree.component.d.ts +3 -5
- package/esm2020/dropdowntrees/dropdowntree.component.mjs +63 -37
- package/esm2020/dropdowntrees/multiselecttree.component.mjs +16 -18
- package/esm2020/multiselect/multiselect.component.mjs +28 -33
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-dropdowns.mjs +106 -87
- package/fesm2020/progress-kendo-angular-dropdowns.mjs +106 -87
- package/multiselect/multiselect.component.d.ts +2 -8
- package/package.json +10 -10
- package/schematics/ngAdd/index.js +4 -4
|
@@ -32,8 +32,8 @@ const packageMetadata = {
|
|
|
32
32
|
name: '@progress/kendo-angular-dropdowns',
|
|
33
33
|
productName: 'Kendo UI for Angular',
|
|
34
34
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
35
|
-
publishDate:
|
|
36
|
-
version: '',
|
|
35
|
+
publishDate: 1674032408,
|
|
36
|
+
version: '11.0.0',
|
|
37
37
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
38
38
|
};
|
|
39
39
|
|
|
@@ -8086,31 +8086,6 @@ class MultiSelectComponent {
|
|
|
8086
8086
|
get isLoading() {
|
|
8087
8087
|
return this.loading;
|
|
8088
8088
|
}
|
|
8089
|
-
/**
|
|
8090
|
-
* @hidden
|
|
8091
|
-
*/
|
|
8092
|
-
handleKeyboardEvent(event) {
|
|
8093
|
-
if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyA) {
|
|
8094
|
-
event.preventDefault();
|
|
8095
|
-
this.handleSelectAll();
|
|
8096
|
-
}
|
|
8097
|
-
}
|
|
8098
|
-
/**
|
|
8099
|
-
* @hidden
|
|
8100
|
-
*/
|
|
8101
|
-
hostMousedown(event) {
|
|
8102
|
-
const inputElement = this.searchbar.input.nativeElement;
|
|
8103
|
-
if (event.button === 0) {
|
|
8104
|
-
if (this.isFocused && this.isOpen && event.target === inputElement) {
|
|
8105
|
-
return;
|
|
8106
|
-
}
|
|
8107
|
-
if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
|
|
8108
|
-
this.searchbar.focus();
|
|
8109
|
-
}
|
|
8110
|
-
this.togglePopup(!this.isOpen);
|
|
8111
|
-
event.preventDefault();
|
|
8112
|
-
}
|
|
8113
|
-
}
|
|
8114
8089
|
get listContainerClasses() {
|
|
8115
8090
|
const containerClasses = ['k-list-container', 'k-reset'];
|
|
8116
8091
|
if (this.popupSettings.popupClass) {
|
|
@@ -8409,6 +8384,8 @@ class MultiSelectComponent {
|
|
|
8409
8384
|
}
|
|
8410
8385
|
ngAfterViewInit() {
|
|
8411
8386
|
this.searchbar.setInputSize();
|
|
8387
|
+
this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'mousedown', this.handleMousedown.bind(this)));
|
|
8388
|
+
this.observableSubscriptions.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
|
|
8412
8389
|
}
|
|
8413
8390
|
ngOnDestroy() {
|
|
8414
8391
|
this._toggle(false);
|
|
@@ -8673,6 +8650,30 @@ class MultiSelectComponent {
|
|
|
8673
8650
|
this.clearFilter();
|
|
8674
8651
|
}
|
|
8675
8652
|
}
|
|
8653
|
+
handleMousedown(event) {
|
|
8654
|
+
const inputElement = this.searchbar.input.nativeElement;
|
|
8655
|
+
if (event.button === 0) {
|
|
8656
|
+
if (this.isFocused && this.isOpen && event.target === inputElement) {
|
|
8657
|
+
return;
|
|
8658
|
+
}
|
|
8659
|
+
if (!this.touchEnabled || (this.touchEnabled && event.target.tagName !== 'SPAN')) {
|
|
8660
|
+
this.searchbar.focus();
|
|
8661
|
+
}
|
|
8662
|
+
// The check is needed otherwise when appended to the component, the popup reopens on click
|
|
8663
|
+
// https://github.com/telerik/kendo-angular/issues/3738
|
|
8664
|
+
if ((this.popupRef && this.popupRef.popupElement.contains(event.target))) {
|
|
8665
|
+
return;
|
|
8666
|
+
}
|
|
8667
|
+
event.preventDefault();
|
|
8668
|
+
this.togglePopup(!this.isOpen);
|
|
8669
|
+
}
|
|
8670
|
+
}
|
|
8671
|
+
handleKeydown(event) {
|
|
8672
|
+
if (this.isFocused && this.isOpen && (event.ctrlKey || event.metaKey) && event.keyCode === Keys.KeyA) {
|
|
8673
|
+
event.preventDefault();
|
|
8674
|
+
this.handleSelectAll();
|
|
8675
|
+
}
|
|
8676
|
+
}
|
|
8676
8677
|
handleEnter(event) {
|
|
8677
8678
|
const service = this.selectionService;
|
|
8678
8679
|
const focusedIndex = this.selectionService.focused;
|
|
@@ -8987,7 +8988,7 @@ class MultiSelectComponent {
|
|
|
8987
8988
|
}
|
|
8988
8989
|
}
|
|
8989
8990
|
MultiSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectComponent, deps: [{ token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i2.PopupService }, { token: DataService }, { token: SelectionService }, { token: NavigationService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
8990
|
-
MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: {
|
|
8991
|
+
MultiSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectComponent, selector: "kendo-multiselect", inputs: { focusableId: "focusableId", autoClose: "autoClose", loading: "loading", data: "data", value: "value", valueField: "valueField", textField: "textField", tabindex: "tabindex", tabIndex: "tabIndex", size: "size", rounded: "rounded", fillMode: "fillMode", placeholder: "placeholder", disabled: "disabled", itemDisabled: "itemDisabled", checkboxes: "checkboxes", readonly: "readonly", filterable: "filterable", virtual: "virtual", popupSettings: "popupSettings", listHeight: "listHeight", valuePrimitive: "valuePrimitive", clearButton: "clearButton", tagMapper: "tagMapper", allowCustom: "allowCustom", valueNormalizer: "valueNormalizer" }, outputs: { filterChange: "filterChange", valueChange: "valueChange", open: "open", opened: "opened", close: "close", closed: "closed", onFocus: "focus", onBlur: "blur", removeTag: "removeTag" }, host: { properties: { "class.k-multiselect": "this.hostClasses", "class.k-input": "this.hostClasses", "attr.dir": "this.dir", "class.k-disabled": "this.disabledClass", "class.k-loading": "this.isLoading" } }, providers: [
|
|
8991
8992
|
MULTISELECT_VALUE_ACCESSOR,
|
|
8992
8993
|
DataService,
|
|
8993
8994
|
SelectionService,
|
|
@@ -9446,12 +9447,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
9446
9447
|
}], isLoading: [{
|
|
9447
9448
|
type: HostBinding,
|
|
9448
9449
|
args: ['class.k-loading']
|
|
9449
|
-
}], handleKeyboardEvent: [{
|
|
9450
|
-
type: HostListener,
|
|
9451
|
-
args: ['keydown', ['$event']]
|
|
9452
|
-
}], hostMousedown: [{
|
|
9453
|
-
type: HostListener,
|
|
9454
|
-
args: ['mousedown', ['$event']]
|
|
9455
9450
|
}] } });
|
|
9456
9451
|
|
|
9457
9452
|
/**
|
|
@@ -10402,7 +10397,7 @@ class DropDownTreeComponent {
|
|
|
10402
10397
|
*/
|
|
10403
10398
|
this.itemDisabled = itemDisabled$1;
|
|
10404
10399
|
/**
|
|
10405
|
-
* A callback which determines whether a tree node should be rendered as hidden. The utility .k-
|
|
10400
|
+
* A callback which determines whether a tree node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
|
|
10406
10401
|
* Useful for custom filtering implementations.
|
|
10407
10402
|
*/
|
|
10408
10403
|
this.isNodeVisible = isNodeVisible$1;
|
|
@@ -10496,27 +10491,6 @@ class DropDownTreeComponent {
|
|
|
10496
10491
|
get isReadonly() {
|
|
10497
10492
|
return this.readonly ? '' : null;
|
|
10498
10493
|
}
|
|
10499
|
-
/**
|
|
10500
|
-
* @hidden
|
|
10501
|
-
*/
|
|
10502
|
-
handleClick() {
|
|
10503
|
-
this.togglePopup(!this.isOpen);
|
|
10504
|
-
}
|
|
10505
|
-
/**
|
|
10506
|
-
* @hidden
|
|
10507
|
-
*/
|
|
10508
|
-
handleKeydown(event) {
|
|
10509
|
-
if (this.disabled || this.readonly) {
|
|
10510
|
-
return;
|
|
10511
|
-
}
|
|
10512
|
-
if (isLetter(event.key)) {
|
|
10513
|
-
this.printableCharacters.next(event.key);
|
|
10514
|
-
}
|
|
10515
|
-
const eventData = event;
|
|
10516
|
-
this.navigationService.process({
|
|
10517
|
-
originalEvent: eventData
|
|
10518
|
-
});
|
|
10519
|
-
}
|
|
10520
10494
|
set treeview(treeview) {
|
|
10521
10495
|
if (treeview) {
|
|
10522
10496
|
if (this.isFocused && !this.filterable || this.touchEnabled) {
|
|
@@ -10687,6 +10661,9 @@ class DropDownTreeComponent {
|
|
|
10687
10661
|
return 'visible';
|
|
10688
10662
|
}
|
|
10689
10663
|
}
|
|
10664
|
+
get isFilterActive() {
|
|
10665
|
+
return this.filterInput && document.activeElement === this.filterInput.nativeElement;
|
|
10666
|
+
}
|
|
10690
10667
|
/**
|
|
10691
10668
|
* @hidden
|
|
10692
10669
|
*
|
|
@@ -10767,8 +10744,6 @@ class DropDownTreeComponent {
|
|
|
10767
10744
|
return node.text.toLowerCase().indexOf(this._typedValue) === 0;
|
|
10768
10745
|
});
|
|
10769
10746
|
this.treeview.focus(itemToFocus?.index);
|
|
10770
|
-
const htmlItem = document.querySelector(`kendo-popup[id='${this._popupId}'] li.k-treeview-item[data-treeindex='${itemToFocus?.index}']`);
|
|
10771
|
-
htmlItem?.scrollIntoView();
|
|
10772
10747
|
}), debounceTime(1000)).subscribe(() => {
|
|
10773
10748
|
this._typedValue = '';
|
|
10774
10749
|
}));
|
|
@@ -10802,6 +10777,10 @@ class DropDownTreeComponent {
|
|
|
10802
10777
|
ngAfterContentChecked() {
|
|
10803
10778
|
this.verifySettings();
|
|
10804
10779
|
}
|
|
10780
|
+
ngAfterViewInit() {
|
|
10781
|
+
this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
|
|
10782
|
+
this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
|
|
10783
|
+
}
|
|
10805
10784
|
/**
|
|
10806
10785
|
* @hidden
|
|
10807
10786
|
*
|
|
@@ -10857,17 +10836,29 @@ class DropDownTreeComponent {
|
|
|
10857
10836
|
return;
|
|
10858
10837
|
}
|
|
10859
10838
|
this.isFocused = false;
|
|
10839
|
+
this.togglePopup(false);
|
|
10860
10840
|
if (hasObservers(this.onBlur) ||
|
|
10861
10841
|
isUntouched(this.wrapper.nativeElement)) {
|
|
10862
10842
|
this._zone.run(() => {
|
|
10863
|
-
this.togglePopup(false);
|
|
10864
10843
|
this.onBlur.emit();
|
|
10865
10844
|
this.onTouchedCallback();
|
|
10866
10845
|
});
|
|
10867
10846
|
}
|
|
10868
|
-
|
|
10869
|
-
|
|
10847
|
+
}
|
|
10848
|
+
/**
|
|
10849
|
+
* @hidden
|
|
10850
|
+
*/
|
|
10851
|
+
handleKeydown(event) {
|
|
10852
|
+
if (this.disabled || this.readonly) {
|
|
10853
|
+
return;
|
|
10854
|
+
}
|
|
10855
|
+
if (!this.isFilterActive && isLetter(event.key)) {
|
|
10856
|
+
this.printableCharacters.next(event.key);
|
|
10870
10857
|
}
|
|
10858
|
+
const eventData = event;
|
|
10859
|
+
this.navigationService.process({
|
|
10860
|
+
originalEvent: eventData
|
|
10861
|
+
});
|
|
10871
10862
|
}
|
|
10872
10863
|
/**
|
|
10873
10864
|
* Focuses a specific item of the DropDownTree based on a provided index in the format of `1_1`.
|
|
@@ -11160,6 +11151,14 @@ class DropDownTreeComponent {
|
|
|
11160
11151
|
}
|
|
11161
11152
|
}
|
|
11162
11153
|
}
|
|
11154
|
+
handleClick(e) {
|
|
11155
|
+
// The check is needed otherwise when appended to the component, the popup reopens on click
|
|
11156
|
+
// https://github.com/telerik/kendo-angular/issues/3738
|
|
11157
|
+
if ((this.popupRef && !this.popupRef.popupElement.contains(e.target))
|
|
11158
|
+
|| (!this.popupRef && !e.target.className.includes('k-treeview-leaf'))) {
|
|
11159
|
+
this.togglePopup(!this.isOpen);
|
|
11160
|
+
}
|
|
11161
|
+
}
|
|
11163
11162
|
handleEscape() {
|
|
11164
11163
|
this.togglePopup(false);
|
|
11165
11164
|
this.focus();
|
|
@@ -11193,10 +11192,25 @@ class DropDownTreeComponent {
|
|
|
11193
11192
|
}),
|
|
11194
11193
|
this.navigationService.enter
|
|
11195
11194
|
.pipe(tap((event) => event.originalEvent.preventDefault()))
|
|
11196
|
-
.subscribe(() =>
|
|
11195
|
+
.subscribe((e) => {
|
|
11196
|
+
// The check is needed otherwise when appended to the component, the popup reopens on click
|
|
11197
|
+
// https://github.com/telerik/kendo-angular/issues/3738
|
|
11198
|
+
if (e.originalEvent.target === this.wrapper.nativeElement) {
|
|
11199
|
+
this.togglePopup(true);
|
|
11200
|
+
}
|
|
11201
|
+
if (!this.isOpen) {
|
|
11202
|
+
this.focus();
|
|
11203
|
+
}
|
|
11204
|
+
}),
|
|
11197
11205
|
this.navigationService.esc
|
|
11198
11206
|
.subscribe(() => this.handleEscape()),
|
|
11199
|
-
this.navigationService.tab.subscribe(() =>
|
|
11207
|
+
this.navigationService.tab.subscribe(() => {
|
|
11208
|
+
this.focus();
|
|
11209
|
+
if (this.isOpen) {
|
|
11210
|
+
this.treeview.blur();
|
|
11211
|
+
this.removeTreeViewFromTabOrder();
|
|
11212
|
+
}
|
|
11213
|
+
}),
|
|
11200
11214
|
this.navigationService.down.subscribe((event) => {
|
|
11201
11215
|
if (!this.treeview) {
|
|
11202
11216
|
return;
|
|
@@ -11284,9 +11298,22 @@ class DropDownTreeComponent {
|
|
|
11284
11298
|
this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('picker', this.fillMode));
|
|
11285
11299
|
}
|
|
11286
11300
|
}
|
|
11301
|
+
/**
|
|
11302
|
+
* Remove the `TreeView` from the tab order, otherwise a focus loop between the page elements will occur
|
|
11303
|
+
* and the user will not be able to tab to the rest of the browser elements
|
|
11304
|
+
*/
|
|
11305
|
+
removeTreeViewFromTabOrder() {
|
|
11306
|
+
const nodes = this.treeview.element.nativeElement.querySelectorAll('li');
|
|
11307
|
+
nodes.forEach(item => {
|
|
11308
|
+
if (item.getAttribute('tabindex') === '0') {
|
|
11309
|
+
this.lastNodeOnFocus = item;
|
|
11310
|
+
this.lastNodeOnFocus.setAttribute('tabindex', '-1');
|
|
11311
|
+
}
|
|
11312
|
+
});
|
|
11313
|
+
}
|
|
11287
11314
|
}
|
|
11288
11315
|
DropDownTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: NavigationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
11289
|
-
DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: {
|
|
11316
|
+
DropDownTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownTreeComponent, selector: "kendo-dropdowntree", inputs: { loading: "loading", clearButton: "clearButton", data: "data", value: "value", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", hasChildren: "hasChildren", fetchChildren: "fetchChildren", placeholder: "placeholder", popupSettings: "popupSettings", dataItem: "dataItem", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", itemDisabled: "itemDisabled", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", loadOnDemand: "loadOnDemand", filterable: "filterable", filter: "filter", focusableId: "focusableId" }, outputs: { open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", onFocus: "focus", onBlur: "blur", valueChange: "valueChange", filterChange: "filterChange" }, host: { properties: { "class.k-dropdowntree": "this.hostClasses", "class.k-picker": "this.hostClasses", "attr.aria-invalid": "this.hostAriaInvalid", "class.k-disabled": "this.isDisabled", "attr.disabled": "this.isDisabledAttribute", "class.k-loading": "this.isLoading", "attr.aria-busy": "this.isBusy", "attr.aria-controls": "this.hostAriaControls", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "attr.readonly": "this.isReadonly" } }, providers: [
|
|
11290
11317
|
DataService,
|
|
11291
11318
|
SelectionService,
|
|
11292
11319
|
NavigationService,
|
|
@@ -11701,12 +11728,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
11701
11728
|
}], isReadonly: [{
|
|
11702
11729
|
type: HostBinding,
|
|
11703
11730
|
args: ['attr.readonly']
|
|
11704
|
-
}], handleClick: [{
|
|
11705
|
-
type: HostListener,
|
|
11706
|
-
args: ['click']
|
|
11707
|
-
}], handleKeydown: [{
|
|
11708
|
-
type: HostListener,
|
|
11709
|
-
args: ['keydown', ['$event']]
|
|
11710
11731
|
}], noDataTemplate: [{
|
|
11711
11732
|
type: ContentChild,
|
|
11712
11733
|
args: [NoDataTemplateDirective, { static: false }]
|
|
@@ -12344,7 +12365,7 @@ class MultiSelectTreeComponent {
|
|
|
12344
12365
|
*/
|
|
12345
12366
|
this.fetchChildren = fetchChildren;
|
|
12346
12367
|
/**
|
|
12347
|
-
* A callback which determines whether a tree node should be rendered as hidden. The utility .k-
|
|
12368
|
+
* A callback which determines whether a tree node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
|
|
12348
12369
|
* Useful for custom filtering implementations.
|
|
12349
12370
|
*/
|
|
12350
12371
|
this.isNodeVisible = isNodeVisible;
|
|
@@ -12491,12 +12512,6 @@ class MultiSelectTreeComponent {
|
|
|
12491
12512
|
const ngControl = this.injector.get(NgControl, null);
|
|
12492
12513
|
return ngControl?.control || null;
|
|
12493
12514
|
}
|
|
12494
|
-
/**
|
|
12495
|
-
* @hidden
|
|
12496
|
-
*/
|
|
12497
|
-
handleClick() {
|
|
12498
|
-
this.togglePopup(!this.isOpen);
|
|
12499
|
-
}
|
|
12500
12515
|
/**
|
|
12501
12516
|
* @hidden
|
|
12502
12517
|
*/
|
|
@@ -12509,7 +12524,7 @@ class MultiSelectTreeComponent {
|
|
|
12509
12524
|
if (this.disabled || this.readonly) {
|
|
12510
12525
|
return;
|
|
12511
12526
|
}
|
|
12512
|
-
if (isLetter(event.key)) {
|
|
12527
|
+
if (!this.isFilterActive && isLetter(event.key)) {
|
|
12513
12528
|
this.printableCharacters.next(event.key);
|
|
12514
12529
|
}
|
|
12515
12530
|
const eventData = event;
|
|
@@ -12848,8 +12863,6 @@ class MultiSelectTreeComponent {
|
|
|
12848
12863
|
return node.text.toLowerCase().indexOf(this._typedValue) === 0;
|
|
12849
12864
|
});
|
|
12850
12865
|
this.treeview.focus(itemToFocus?.index);
|
|
12851
|
-
const htmlItem = document.querySelector(`kendo-popup[id='${this._popupId}'] li.k-treeview-item[data-treeindex='${itemToFocus?.index}']`);
|
|
12852
|
-
htmlItem?.scrollIntoView();
|
|
12853
12866
|
}), debounceTime(1000)).subscribe(() => {
|
|
12854
12867
|
this._typedValue = '';
|
|
12855
12868
|
}));
|
|
@@ -12862,6 +12875,10 @@ class MultiSelectTreeComponent {
|
|
|
12862
12875
|
}));
|
|
12863
12876
|
this.setComponentClasses();
|
|
12864
12877
|
}
|
|
12878
|
+
ngAfterViewInit() {
|
|
12879
|
+
this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'click', this.handleClick.bind(this)));
|
|
12880
|
+
this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'keydown', this.handleKeydown.bind(this)));
|
|
12881
|
+
}
|
|
12865
12882
|
/**
|
|
12866
12883
|
* @hidden
|
|
12867
12884
|
*/
|
|
@@ -13288,6 +13305,14 @@ class MultiSelectTreeComponent {
|
|
|
13288
13305
|
}
|
|
13289
13306
|
}
|
|
13290
13307
|
}
|
|
13308
|
+
handleClick(e) {
|
|
13309
|
+
// The check is needed otherwise when appended to the component, the popup reopens on click
|
|
13310
|
+
// https://github.com/telerik/kendo-angular/issues/3738
|
|
13311
|
+
if ((this.popupRef && this.popupRef.popupElement.contains(e.target))) {
|
|
13312
|
+
return;
|
|
13313
|
+
}
|
|
13314
|
+
this.togglePopup(!this.isOpen);
|
|
13315
|
+
}
|
|
13291
13316
|
subscribeEvents() {
|
|
13292
13317
|
[
|
|
13293
13318
|
this.navigationService.open.subscribe((event) => {
|
|
@@ -13555,7 +13580,7 @@ class MultiSelectTreeComponent {
|
|
|
13555
13580
|
}
|
|
13556
13581
|
}
|
|
13557
13582
|
MultiSelectTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MultiSelectTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i2.PopupService }, { token: i0.Renderer2 }, { token: NavigationService }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: MultiSelectTreeLookupService }, { token: TOUCH_ENABLED, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
13558
|
-
MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: {
|
|
13583
|
+
MultiSelectTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MultiSelectTreeComponent, selector: "kendo-multiselecttree", inputs: { tabindex: "tabindex", size: "size", rounded: "rounded", fillMode: "fillMode", popupSettings: "popupSettings", checkableSettings: "checkableSettings", data: "data", value: "value", dataItems: "dataItems", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", loading: "loading", placeholder: "placeholder", listHeight: "listHeight", disabled: "disabled", readonly: "readonly", valuePrimitive: "valuePrimitive", loadOnDemand: "loadOnDemand", focusableId: "focusableId", clearButton: "clearButton", filterable: "filterable", checkAll: "checkAll", hasChildren: "hasChildren", fetchChildren: "fetchChildren", isNodeExpanded: "isNodeExpanded", isNodeVisible: "isNodeVisible", itemDisabled: "itemDisabled", tagMapper: "tagMapper" }, outputs: { onFocus: "focus", onBlur: "blur", open: "open", opened: "opened", close: "close", closed: "closed", nodeExpand: "nodeExpand", nodeCollapse: "nodeCollapse", valueChange: "valueChange", removeTag: "removeTag", filterChange: "filterChange" }, host: { properties: { "class.k-multiselect-tree": "this.hostClasses", "class.k-input": "this.hostClasses", "class.k-disabled": "this.isDisabled", "attr.aria-disabled": "this.isDisabled", "attr.aria-controls": "this.hostAriaControls", "attr.aria-autocomplete": "this.hostAriaAutocomplete", "class.k-loading": "this.isLoading", "attr.aria-invalid": "this.hostAriaInvalid", "attr.aria-busy": "this.isBusy", "attr.id": "this.id", "attr.dir": "this.direction", "attr.tabindex": "this.hostTabIndex", "attr.role": "this.role", "attr.aria-expanded": "this.isAriaExpanded", "attr.aria-haspopup": "this.ariaHasPopup", "attr.readonly": "this.isReadonly", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-activedescendant": "this.ariaActiveDescendant" } }, providers: [
|
|
13559
13584
|
LocalizationService,
|
|
13560
13585
|
NavigationService,
|
|
13561
13586
|
DataService,
|
|
@@ -14041,12 +14066,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
14041
14066
|
}], ariaActiveDescendant: [{
|
|
14042
14067
|
type: HostBinding,
|
|
14043
14068
|
args: ['attr.aria-activedescendant']
|
|
14044
|
-
}], handleClick: [{
|
|
14045
|
-
type: HostListener,
|
|
14046
|
-
args: ['click']
|
|
14047
|
-
}], handleKeydown: [{
|
|
14048
|
-
type: HostListener,
|
|
14049
|
-
args: ['keydown', ['$event']]
|
|
14050
14069
|
}], headerTemplate: [{
|
|
14051
14070
|
type: ContentChild,
|
|
14052
14071
|
args: [HeaderTemplateDirective, { static: false }]
|
|
@@ -389,14 +389,6 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
|
|
|
389
389
|
get dir(): string;
|
|
390
390
|
get disabledClass(): boolean;
|
|
391
391
|
get isLoading(): boolean;
|
|
392
|
-
/**
|
|
393
|
-
* @hidden
|
|
394
|
-
*/
|
|
395
|
-
handleKeyboardEvent(event: KeyboardEvent): void;
|
|
396
|
-
/**
|
|
397
|
-
* @hidden
|
|
398
|
-
*/
|
|
399
|
-
hostMousedown(event: any): void;
|
|
400
392
|
disabledIndices: Set<number>;
|
|
401
393
|
private initialized;
|
|
402
394
|
private _size;
|
|
@@ -538,6 +530,8 @@ export declare class MultiSelectComponent implements OnDestroy, OnChanges, OnIni
|
|
|
538
530
|
private disabledItemsMapper;
|
|
539
531
|
private createCustomValueStream;
|
|
540
532
|
private handleItemChange;
|
|
533
|
+
private handleMousedown;
|
|
534
|
+
private handleKeydown;
|
|
541
535
|
private handleEnter;
|
|
542
536
|
private handleClose;
|
|
543
537
|
private handleEnd;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-dropdowns",
|
|
3
|
-
"version": "11.0.0
|
|
3
|
+
"version": "11.0.0",
|
|
4
4
|
"description": "A wide variety of native Angular dropdown components including AutoComplete, ComboBox, DropDownList, DropDownTree, MultiColumnComboBox, MultiSelect, and MultiSelectTree ",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -23,19 +23,19 @@
|
|
|
23
23
|
"@angular/common": "13 - 15",
|
|
24
24
|
"@angular/core": "13 - 15",
|
|
25
25
|
"@angular/platform-browser": "13 - 15",
|
|
26
|
-
"@progress/kendo-common": "^0.2.1",
|
|
27
26
|
"@progress/kendo-licensing": "^1.0.2",
|
|
28
|
-
"@progress/kendo-angular-common": "11.0.0
|
|
29
|
-
"@progress/kendo-angular-l10n": "11.0.0
|
|
30
|
-
"@progress/kendo-angular-popup": "11.0.0
|
|
31
|
-
"@progress/kendo-angular-icons": "11.0.0
|
|
32
|
-
"@progress/kendo-angular-
|
|
33
|
-
"@progress/kendo-angular-treeview": "11.0.0-develop.98",
|
|
27
|
+
"@progress/kendo-angular-common": "11.0.0",
|
|
28
|
+
"@progress/kendo-angular-l10n": "11.0.0",
|
|
29
|
+
"@progress/kendo-angular-popup": "11.0.0",
|
|
30
|
+
"@progress/kendo-angular-icons": "11.0.0",
|
|
31
|
+
"@progress/kendo-angular-treeview": "11.0.0",
|
|
34
32
|
"rxjs": "^6.5.3 || ^7.0.0",
|
|
35
|
-
"@progress/kendo-angular-label": "11.0.0
|
|
33
|
+
"@progress/kendo-angular-label": "11.0.0"
|
|
36
34
|
},
|
|
37
35
|
"dependencies": {
|
|
38
|
-
"tslib": "^2.3.1"
|
|
36
|
+
"tslib": "^2.3.1",
|
|
37
|
+
"@progress/kendo-angular-schematics": "11.0.0",
|
|
38
|
+
"@progress/kendo-common": "^0.2.1"
|
|
39
39
|
},
|
|
40
40
|
"schematics": "./schematics/collection.json",
|
|
41
41
|
"module": "fesm2015/progress-kendo-angular-dropdowns.mjs",
|
|
@@ -4,12 +4,12 @@ const schematics_1 = require("@angular-devkit/schematics");
|
|
|
4
4
|
function default_1(options) {
|
|
5
5
|
const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'DropDownsModule', package: 'dropdowns', peerDependencies: {
|
|
6
6
|
// peers of the treeview
|
|
7
|
-
|
|
7
|
+
'@progress/kendo-angular-inputs': '11.0.0',
|
|
8
8
|
// peers of inputs
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
'@progress/kendo-angular-intl': '11.0.0',
|
|
10
|
+
'@progress/kendo-drawing': '^1.17.2',
|
|
11
11
|
// Peer dependency of icons
|
|
12
|
-
|
|
12
|
+
'@progress/kendo-svg-icons': '^1.0.0'
|
|
13
13
|
} });
|
|
14
14
|
return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
|
|
15
15
|
}
|