@progress/kendo-angular-dropdowns 16.4.0-develop.3 → 16.4.0-develop.5
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/taglist.component.d.ts +1 -2
- package/esm2020/common/taglist.component.mjs +5 -13
- package/esm2020/dropdowntrees/multiselecttree.component.mjs +2 -3
- package/esm2020/multiselect/multiselect.component.mjs +12 -5
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-dropdowns.mjs +20 -22
- package/fesm2020/progress-kendo-angular-dropdowns.mjs +20 -22
- package/package.json +8 -8
- package/schematics/ngAdd/index.js +2 -2
|
@@ -41,9 +41,8 @@ export declare class TagListComponent {
|
|
|
41
41
|
removeTag: EventEmitter<any>;
|
|
42
42
|
hostClasses: boolean;
|
|
43
43
|
get hostId(): string;
|
|
44
|
-
|
|
44
|
+
taglistRole: string;
|
|
45
45
|
multiselectable: boolean;
|
|
46
|
-
get taglistLabel(): string;
|
|
47
46
|
private _size;
|
|
48
47
|
constructor(renderer: Renderer2, hostElement: ElementRef<HTMLElement>);
|
|
49
48
|
tagProp(tag: any, prop: string | string[], index: number): string;
|
|
@@ -30,6 +30,7 @@ export class TagListComponent {
|
|
|
30
30
|
this.disabledIndices = new Set();
|
|
31
31
|
this.removeTag = new EventEmitter();
|
|
32
32
|
this.hostClasses = true;
|
|
33
|
+
this.taglistRole = 'listbox';
|
|
33
34
|
this.multiselectable = true;
|
|
34
35
|
this._size = 'medium';
|
|
35
36
|
}
|
|
@@ -46,12 +47,6 @@ export class TagListComponent {
|
|
|
46
47
|
get hostId() {
|
|
47
48
|
return this.id;
|
|
48
49
|
}
|
|
49
|
-
get taglistRole() {
|
|
50
|
-
return 'listbox';
|
|
51
|
-
}
|
|
52
|
-
get taglistLabel() {
|
|
53
|
-
return 'taglist';
|
|
54
|
-
}
|
|
55
50
|
tagProp(tag, prop, index) {
|
|
56
51
|
const propField = prop && this.getPropField(tag, prop, index);
|
|
57
52
|
return getter(tag, propField);
|
|
@@ -77,7 +72,7 @@ export class TagListComponent {
|
|
|
77
72
|
}
|
|
78
73
|
itemId(tag, index) {
|
|
79
74
|
if (tag) { //because of custom values
|
|
80
|
-
return this.tagPrefix + "-" +
|
|
75
|
+
return this.tagPrefix + "-" + index;
|
|
81
76
|
}
|
|
82
77
|
}
|
|
83
78
|
isGroupTag(tag) {
|
|
@@ -102,11 +97,11 @@ export class TagListComponent {
|
|
|
102
97
|
}
|
|
103
98
|
}
|
|
104
99
|
TagListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
105
|
-
TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable"
|
|
100
|
+
TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable" } }, ngImport: i0, template: `
|
|
106
101
|
<div
|
|
107
102
|
*ngFor="let tag of tags; let index = index;"
|
|
108
103
|
[attr.id]="itemId(tag, index)"
|
|
109
|
-
[attr.aria-
|
|
104
|
+
[attr.aria-selected]="true"
|
|
110
105
|
[attr.role]="'option'"
|
|
111
106
|
class="k-chip"
|
|
112
107
|
[ngClass]="{
|
|
@@ -170,7 +165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
170
165
|
<div
|
|
171
166
|
*ngFor="let tag of tags; let index = index;"
|
|
172
167
|
[attr.id]="itemId(tag, index)"
|
|
173
|
-
[attr.aria-
|
|
168
|
+
[attr.aria-selected]="true"
|
|
174
169
|
[attr.role]="'option'"
|
|
175
170
|
class="k-chip"
|
|
176
171
|
[ngClass]="{
|
|
@@ -272,7 +267,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
272
267
|
}], multiselectable: [{
|
|
273
268
|
type: HostBinding,
|
|
274
269
|
args: ['attr.aria-multiselectable']
|
|
275
|
-
}], taglistLabel: [{
|
|
276
|
-
type: HostBinding,
|
|
277
|
-
args: ['attr.aria-label']
|
|
278
270
|
}] } });
|
|
@@ -360,7 +360,7 @@ export class MultiSelectTreeComponent {
|
|
|
360
360
|
*/
|
|
361
361
|
handleKeydown(event, input) {
|
|
362
362
|
if (event.target === this.filterInput?.nativeElement &&
|
|
363
|
-
event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight) {
|
|
363
|
+
(event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight)) {
|
|
364
364
|
return;
|
|
365
365
|
}
|
|
366
366
|
if (input) {
|
|
@@ -618,8 +618,7 @@ export class MultiSelectTreeComponent {
|
|
|
618
618
|
if (!isPresent(this.focusedTagIndex) || this.isOpen) {
|
|
619
619
|
return null;
|
|
620
620
|
}
|
|
621
|
-
|
|
622
|
-
return `${this.tagPrefix}-${valueFrom({ dataItem }, this.valueField)}`;
|
|
621
|
+
return this.tagPrefix + '-' + this.focusedTagIndex;
|
|
623
622
|
}
|
|
624
623
|
set isFocused(isFocused) {
|
|
625
624
|
this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
|
|
@@ -6,7 +6,7 @@ import { guid, isPresent, isArray, isObjectArray, resolveAllValues, selectedIndi
|
|
|
6
6
|
import { SearchBarComponent } from '../common/searchbar.component';
|
|
7
7
|
import { ViewChild, Renderer2, ViewContainerRef, Component, HostBinding, Input, ElementRef, TemplateRef, Output, EventEmitter, isDevMode, forwardRef, ContentChild, ChangeDetectorRef, KeyValueDiffers, NgZone, Optional, Inject, Injector } from '@angular/core';
|
|
8
8
|
import { Subscription, Subject, of, merge } from 'rxjs';
|
|
9
|
-
import { catchError, filter, map, tap } from 'rxjs/operators';
|
|
9
|
+
import { catchError, filter, map, take, tap } from 'rxjs/operators';
|
|
10
10
|
import { isChanged, isDocumentAvailable, KendoInput, hasObservers, anyChanged, SuffixTemplateDirective, PrefixTemplateDirective, isControlRequired } from '@progress/kendo-angular-common';
|
|
11
11
|
import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
|
|
12
12
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
@@ -772,19 +772,19 @@ export class MultiSelectComponent {
|
|
|
772
772
|
const focusedTagIndex = this.focusedTagIndex;
|
|
773
773
|
const focusedListIndex = this.selectionService.focused;
|
|
774
774
|
let prefix;
|
|
775
|
-
let
|
|
775
|
+
let focusedIndex;
|
|
776
776
|
if (isPresent(focusedTagIndex) && !this.isOpen) {
|
|
777
|
-
|
|
777
|
+
focusedIndex = focusedTagIndex;
|
|
778
778
|
prefix = this.tagPrefix;
|
|
779
779
|
}
|
|
780
780
|
else if (isPresent(focusedListIndex) && focusedListIndex !== -1 && this.isOpen) {
|
|
781
|
-
|
|
781
|
+
focusedIndex = focusedListIndex;
|
|
782
782
|
prefix = this.optionPrefix;
|
|
783
783
|
}
|
|
784
784
|
else {
|
|
785
785
|
return null;
|
|
786
786
|
}
|
|
787
|
-
return prefix + "-" +
|
|
787
|
+
return prefix + "-" + focusedIndex;
|
|
788
788
|
}
|
|
789
789
|
get clearButtonVisiblity() {
|
|
790
790
|
if (this.touchEnabled) {
|
|
@@ -1091,6 +1091,13 @@ export class MultiSelectComponent {
|
|
|
1091
1091
|
this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
|
|
1092
1092
|
this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
|
|
1093
1093
|
}
|
|
1094
|
+
this._zone.onStable.pipe(take(1)).subscribe(() => {
|
|
1095
|
+
const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby') ||
|
|
1096
|
+
this.searchbar.input.nativeElement.getAttribute('data-kendo-label-id');
|
|
1097
|
+
if (ariaLabel) {
|
|
1098
|
+
this.renderer.setAttribute(this.tagList.hostElement.nativeElement, 'aria-labelledby', ariaLabel);
|
|
1099
|
+
}
|
|
1100
|
+
});
|
|
1094
1101
|
}
|
|
1095
1102
|
ngOnDestroy() {
|
|
1096
1103
|
this._toggle(false);
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-dropdowns',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '16.4.0-develop.
|
|
12
|
+
publishDate: 1719998467,
|
|
13
|
+
version: '16.4.0-develop.5',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -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:
|
|
42
|
-
version: '16.4.0-develop.
|
|
41
|
+
publishDate: 1719998467,
|
|
42
|
+
version: '16.4.0-develop.5',
|
|
43
43
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
44
44
|
};
|
|
45
45
|
|
|
@@ -8764,6 +8764,7 @@ class TagListComponent {
|
|
|
8764
8764
|
this.disabledIndices = new Set();
|
|
8765
8765
|
this.removeTag = new EventEmitter();
|
|
8766
8766
|
this.hostClasses = true;
|
|
8767
|
+
this.taglistRole = 'listbox';
|
|
8767
8768
|
this.multiselectable = true;
|
|
8768
8769
|
this._size = 'medium';
|
|
8769
8770
|
}
|
|
@@ -8780,12 +8781,6 @@ class TagListComponent {
|
|
|
8780
8781
|
get hostId() {
|
|
8781
8782
|
return this.id;
|
|
8782
8783
|
}
|
|
8783
|
-
get taglistRole() {
|
|
8784
|
-
return 'listbox';
|
|
8785
|
-
}
|
|
8786
|
-
get taglistLabel() {
|
|
8787
|
-
return 'taglist';
|
|
8788
|
-
}
|
|
8789
8784
|
tagProp(tag, prop, index) {
|
|
8790
8785
|
const propField = prop && this.getPropField(tag, prop, index);
|
|
8791
8786
|
return getter(tag, propField);
|
|
@@ -8811,7 +8806,7 @@ class TagListComponent {
|
|
|
8811
8806
|
}
|
|
8812
8807
|
itemId(tag, index) {
|
|
8813
8808
|
if (tag) { //because of custom values
|
|
8814
|
-
return this.tagPrefix + "-" +
|
|
8809
|
+
return this.tagPrefix + "-" + index;
|
|
8815
8810
|
}
|
|
8816
8811
|
}
|
|
8817
8812
|
isGroupTag(tag) {
|
|
@@ -8836,11 +8831,11 @@ class TagListComponent {
|
|
|
8836
8831
|
}
|
|
8837
8832
|
}
|
|
8838
8833
|
TagListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8839
|
-
TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable"
|
|
8834
|
+
TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable" } }, ngImport: i0, template: `
|
|
8840
8835
|
<div
|
|
8841
8836
|
*ngFor="let tag of tags; let index = index;"
|
|
8842
8837
|
[attr.id]="itemId(tag, index)"
|
|
8843
|
-
[attr.aria-
|
|
8838
|
+
[attr.aria-selected]="true"
|
|
8844
8839
|
[attr.role]="'option'"
|
|
8845
8840
|
class="k-chip"
|
|
8846
8841
|
[ngClass]="{
|
|
@@ -8904,7 +8899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
8904
8899
|
<div
|
|
8905
8900
|
*ngFor="let tag of tags; let index = index;"
|
|
8906
8901
|
[attr.id]="itemId(tag, index)"
|
|
8907
|
-
[attr.aria-
|
|
8902
|
+
[attr.aria-selected]="true"
|
|
8908
8903
|
[attr.role]="'option'"
|
|
8909
8904
|
class="k-chip"
|
|
8910
8905
|
[ngClass]="{
|
|
@@ -9006,9 +9001,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
9006
9001
|
}], multiselectable: [{
|
|
9007
9002
|
type: HostBinding,
|
|
9008
9003
|
args: ['attr.aria-multiselectable']
|
|
9009
|
-
}], taglistLabel: [{
|
|
9010
|
-
type: HostBinding,
|
|
9011
|
-
args: ['attr.aria-label']
|
|
9012
9004
|
}] } });
|
|
9013
9005
|
|
|
9014
9006
|
const MULTISELECT_VALUE_ACCESSOR = {
|
|
@@ -9730,19 +9722,19 @@ class MultiSelectComponent {
|
|
|
9730
9722
|
const focusedTagIndex = this.focusedTagIndex;
|
|
9731
9723
|
const focusedListIndex = this.selectionService.focused;
|
|
9732
9724
|
let prefix;
|
|
9733
|
-
let
|
|
9725
|
+
let focusedIndex;
|
|
9734
9726
|
if (isPresent(focusedTagIndex) && !this.isOpen) {
|
|
9735
|
-
|
|
9727
|
+
focusedIndex = focusedTagIndex;
|
|
9736
9728
|
prefix = this.tagPrefix;
|
|
9737
9729
|
}
|
|
9738
9730
|
else if (isPresent(focusedListIndex) && focusedListIndex !== -1 && this.isOpen) {
|
|
9739
|
-
|
|
9731
|
+
focusedIndex = focusedListIndex;
|
|
9740
9732
|
prefix = this.optionPrefix;
|
|
9741
9733
|
}
|
|
9742
9734
|
else {
|
|
9743
9735
|
return null;
|
|
9744
9736
|
}
|
|
9745
|
-
return prefix + "-" +
|
|
9737
|
+
return prefix + "-" + focusedIndex;
|
|
9746
9738
|
}
|
|
9747
9739
|
get clearButtonVisiblity() {
|
|
9748
9740
|
if (this.touchEnabled) {
|
|
@@ -10049,6 +10041,13 @@ class MultiSelectComponent {
|
|
|
10049
10041
|
this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
|
|
10050
10042
|
this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
|
|
10051
10043
|
}
|
|
10044
|
+
this._zone.onStable.pipe(take(1)).subscribe(() => {
|
|
10045
|
+
const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby') ||
|
|
10046
|
+
this.searchbar.input.nativeElement.getAttribute('data-kendo-label-id');
|
|
10047
|
+
if (ariaLabel) {
|
|
10048
|
+
this.renderer.setAttribute(this.tagList.hostElement.nativeElement, 'aria-labelledby', ariaLabel);
|
|
10049
|
+
}
|
|
10050
|
+
});
|
|
10052
10051
|
}
|
|
10053
10052
|
ngOnDestroy() {
|
|
10054
10053
|
this._toggle(false);
|
|
@@ -14717,7 +14716,7 @@ class MultiSelectTreeComponent {
|
|
|
14717
14716
|
handleKeydown(event, input) {
|
|
14718
14717
|
var _a, _b, _c;
|
|
14719
14718
|
if (event.target === ((_a = this.filterInput) === null || _a === void 0 ? void 0 : _a.nativeElement) &&
|
|
14720
|
-
event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight) {
|
|
14719
|
+
(event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight)) {
|
|
14721
14720
|
return;
|
|
14722
14721
|
}
|
|
14723
14722
|
if (input) {
|
|
@@ -14977,8 +14976,7 @@ class MultiSelectTreeComponent {
|
|
|
14977
14976
|
if (!isPresent(this.focusedTagIndex) || this.isOpen) {
|
|
14978
14977
|
return null;
|
|
14979
14978
|
}
|
|
14980
|
-
|
|
14981
|
-
return `${this.tagPrefix}-${valueFrom({ dataItem }, this.valueField)}`;
|
|
14979
|
+
return this.tagPrefix + '-' + this.focusedTagIndex;
|
|
14982
14980
|
}
|
|
14983
14981
|
set isFocused(isFocused) {
|
|
14984
14982
|
this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
|
|
@@ -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:
|
|
42
|
-
version: '16.4.0-develop.
|
|
41
|
+
publishDate: 1719998467,
|
|
42
|
+
version: '16.4.0-develop.5',
|
|
43
43
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
44
44
|
};
|
|
45
45
|
|
|
@@ -8742,6 +8742,7 @@ class TagListComponent {
|
|
|
8742
8742
|
this.disabledIndices = new Set();
|
|
8743
8743
|
this.removeTag = new EventEmitter();
|
|
8744
8744
|
this.hostClasses = true;
|
|
8745
|
+
this.taglistRole = 'listbox';
|
|
8745
8746
|
this.multiselectable = true;
|
|
8746
8747
|
this._size = 'medium';
|
|
8747
8748
|
}
|
|
@@ -8758,12 +8759,6 @@ class TagListComponent {
|
|
|
8758
8759
|
get hostId() {
|
|
8759
8760
|
return this.id;
|
|
8760
8761
|
}
|
|
8761
|
-
get taglistRole() {
|
|
8762
|
-
return 'listbox';
|
|
8763
|
-
}
|
|
8764
|
-
get taglistLabel() {
|
|
8765
|
-
return 'taglist';
|
|
8766
|
-
}
|
|
8767
8762
|
tagProp(tag, prop, index) {
|
|
8768
8763
|
const propField = prop && this.getPropField(tag, prop, index);
|
|
8769
8764
|
return getter(tag, propField);
|
|
@@ -8789,7 +8784,7 @@ class TagListComponent {
|
|
|
8789
8784
|
}
|
|
8790
8785
|
itemId(tag, index) {
|
|
8791
8786
|
if (tag) { //because of custom values
|
|
8792
|
-
return this.tagPrefix + "-" +
|
|
8787
|
+
return this.tagPrefix + "-" + index;
|
|
8793
8788
|
}
|
|
8794
8789
|
}
|
|
8795
8790
|
isGroupTag(tag) {
|
|
@@ -8814,11 +8809,11 @@ class TagListComponent {
|
|
|
8814
8809
|
}
|
|
8815
8810
|
}
|
|
8816
8811
|
TagListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagListComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8817
|
-
TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable"
|
|
8812
|
+
TagListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TagListComponent, selector: "kendo-taglist", inputs: { tags: "tags", textField: "textField", valueField: "valueField", valueDepth: "valueDepth", focused: "focused", template: "template", groupTemplate: "groupTemplate", disabled: "disabled", tagPrefix: "tagPrefix", id: "id", size: "size", rounded: "rounded", fillMode: "fillMode", disabledIndices: "disabledIndices" }, outputs: { removeTag: "removeTag" }, host: { properties: { "class.k-chip-list": "this.hostClasses", "class.k-selection-multiple": "this.hostClasses", "attr.id": "this.hostId", "attr.role": "this.taglistRole", "attr.aria-multiselectable": "this.multiselectable" } }, ngImport: i0, template: `
|
|
8818
8813
|
<div
|
|
8819
8814
|
*ngFor="let tag of tags; let index = index;"
|
|
8820
8815
|
[attr.id]="itemId(tag, index)"
|
|
8821
|
-
[attr.aria-
|
|
8816
|
+
[attr.aria-selected]="true"
|
|
8822
8817
|
[attr.role]="'option'"
|
|
8823
8818
|
class="k-chip"
|
|
8824
8819
|
[ngClass]="{
|
|
@@ -8882,7 +8877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
8882
8877
|
<div
|
|
8883
8878
|
*ngFor="let tag of tags; let index = index;"
|
|
8884
8879
|
[attr.id]="itemId(tag, index)"
|
|
8885
|
-
[attr.aria-
|
|
8880
|
+
[attr.aria-selected]="true"
|
|
8886
8881
|
[attr.role]="'option'"
|
|
8887
8882
|
class="k-chip"
|
|
8888
8883
|
[ngClass]="{
|
|
@@ -8984,9 +8979,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
8984
8979
|
}], multiselectable: [{
|
|
8985
8980
|
type: HostBinding,
|
|
8986
8981
|
args: ['attr.aria-multiselectable']
|
|
8987
|
-
}], taglistLabel: [{
|
|
8988
|
-
type: HostBinding,
|
|
8989
|
-
args: ['attr.aria-label']
|
|
8990
8982
|
}] } });
|
|
8991
8983
|
|
|
8992
8984
|
const MULTISELECT_VALUE_ACCESSOR = {
|
|
@@ -9704,19 +9696,19 @@ class MultiSelectComponent {
|
|
|
9704
9696
|
const focusedTagIndex = this.focusedTagIndex;
|
|
9705
9697
|
const focusedListIndex = this.selectionService.focused;
|
|
9706
9698
|
let prefix;
|
|
9707
|
-
let
|
|
9699
|
+
let focusedIndex;
|
|
9708
9700
|
if (isPresent(focusedTagIndex) && !this.isOpen) {
|
|
9709
|
-
|
|
9701
|
+
focusedIndex = focusedTagIndex;
|
|
9710
9702
|
prefix = this.tagPrefix;
|
|
9711
9703
|
}
|
|
9712
9704
|
else if (isPresent(focusedListIndex) && focusedListIndex !== -1 && this.isOpen) {
|
|
9713
|
-
|
|
9705
|
+
focusedIndex = focusedListIndex;
|
|
9714
9706
|
prefix = this.optionPrefix;
|
|
9715
9707
|
}
|
|
9716
9708
|
else {
|
|
9717
9709
|
return null;
|
|
9718
9710
|
}
|
|
9719
|
-
return prefix + "-" +
|
|
9711
|
+
return prefix + "-" + focusedIndex;
|
|
9720
9712
|
}
|
|
9721
9713
|
get clearButtonVisiblity() {
|
|
9722
9714
|
if (this.touchEnabled) {
|
|
@@ -10023,6 +10015,13 @@ class MultiSelectComponent {
|
|
|
10023
10015
|
this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-height', '60vh');
|
|
10024
10016
|
this.actionSheet.element.nativeElement.style.setProperty('--kendo-actionsheet-max-height', 'none');
|
|
10025
10017
|
}
|
|
10018
|
+
this._zone.onStable.pipe(take(1)).subscribe(() => {
|
|
10019
|
+
const ariaLabel = this.searchbar.input.nativeElement.getAttribute('aria-labelledby') ||
|
|
10020
|
+
this.searchbar.input.nativeElement.getAttribute('data-kendo-label-id');
|
|
10021
|
+
if (ariaLabel) {
|
|
10022
|
+
this.renderer.setAttribute(this.tagList.hostElement.nativeElement, 'aria-labelledby', ariaLabel);
|
|
10023
|
+
}
|
|
10024
|
+
});
|
|
10026
10025
|
}
|
|
10027
10026
|
ngOnDestroy() {
|
|
10028
10027
|
this._toggle(false);
|
|
@@ -14679,7 +14678,7 @@ class MultiSelectTreeComponent {
|
|
|
14679
14678
|
*/
|
|
14680
14679
|
handleKeydown(event, input) {
|
|
14681
14680
|
if (event.target === this.filterInput?.nativeElement &&
|
|
14682
|
-
event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight) {
|
|
14681
|
+
(event.keyCode === Keys.ArrowLeft || event.keyCode === Keys.ArrowRight)) {
|
|
14683
14682
|
return;
|
|
14684
14683
|
}
|
|
14685
14684
|
if (input) {
|
|
@@ -14937,8 +14936,7 @@ class MultiSelectTreeComponent {
|
|
|
14937
14936
|
if (!isPresent(this.focusedTagIndex) || this.isOpen) {
|
|
14938
14937
|
return null;
|
|
14939
14938
|
}
|
|
14940
|
-
|
|
14941
|
-
return `${this.tagPrefix}-${valueFrom({ dataItem }, this.valueField)}`;
|
|
14939
|
+
return this.tagPrefix + '-' + this.focusedTagIndex;
|
|
14942
14940
|
}
|
|
14943
14941
|
set isFocused(isFocused) {
|
|
14944
14942
|
this.renderer[isFocused ? 'addClass' : 'removeClass'](this.wrapper.nativeElement, 'k-focus');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-dropdowns",
|
|
3
|
-
"version": "16.4.0-develop.
|
|
3
|
+
"version": "16.4.0-develop.5",
|
|
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",
|
|
@@ -25,17 +25,17 @@
|
|
|
25
25
|
"@angular/forms": "15 - 18",
|
|
26
26
|
"@angular/platform-browser": "15 - 18",
|
|
27
27
|
"@progress/kendo-licensing": "^1.0.2",
|
|
28
|
-
"@progress/kendo-angular-common": "16.4.0-develop.
|
|
29
|
-
"@progress/kendo-angular-l10n": "16.4.0-develop.
|
|
30
|
-
"@progress/kendo-angular-navigation": "16.4.0-develop.
|
|
31
|
-
"@progress/kendo-angular-popup": "16.4.0-develop.
|
|
32
|
-
"@progress/kendo-angular-icons": "16.4.0-develop.
|
|
33
|
-
"@progress/kendo-angular-treeview": "16.4.0-develop.
|
|
28
|
+
"@progress/kendo-angular-common": "16.4.0-develop.5",
|
|
29
|
+
"@progress/kendo-angular-l10n": "16.4.0-develop.5",
|
|
30
|
+
"@progress/kendo-angular-navigation": "16.4.0-develop.5",
|
|
31
|
+
"@progress/kendo-angular-popup": "16.4.0-develop.5",
|
|
32
|
+
"@progress/kendo-angular-icons": "16.4.0-develop.5",
|
|
33
|
+
"@progress/kendo-angular-treeview": "16.4.0-develop.5",
|
|
34
34
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"tslib": "^2.3.1",
|
|
38
|
-
"@progress/kendo-angular-schematics": "16.4.0-develop.
|
|
38
|
+
"@progress/kendo-angular-schematics": "16.4.0-develop.5",
|
|
39
39
|
"@progress/kendo-common": "^0.2.1"
|
|
40
40
|
},
|
|
41
41
|
"schematics": "./schematics/collection.json",
|
|
@@ -4,9 +4,9 @@ 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
|
-
'@progress/kendo-angular-inputs': '16.4.0-develop.
|
|
7
|
+
'@progress/kendo-angular-inputs': '16.4.0-develop.5',
|
|
8
8
|
// peers of inputs
|
|
9
|
-
'@progress/kendo-angular-intl': '16.4.0-develop.
|
|
9
|
+
'@progress/kendo-angular-intl': '16.4.0-develop.5',
|
|
10
10
|
'@progress/kendo-drawing': '^1.17.2',
|
|
11
11
|
// Peer dependency of icons
|
|
12
12
|
'@progress/kendo-svg-icons': '^3.0.0'
|