@progress/kendo-angular-dropdowns 21.0.0-develop.3 → 21.0.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/list-item.directive.d.ts +1 -1
- package/common/list.component.d.ts +2 -5
- package/esm2022/common/list-item.directive.mjs +2 -2
- package/esm2022/common/list.component.mjs +136 -126
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-dropdowns.mjs +140 -130
- package/package.json +10 -10
- package/schematics/ngAdd/index.js +2 -2
|
@@ -11,5 +11,5 @@ export declare class ListItemDirective {
|
|
|
11
11
|
element: ElementRef;
|
|
12
12
|
constructor(element: ElementRef);
|
|
13
13
|
static ɵfac: i0.ɵɵFactoryDeclaration<ListItemDirective, never>;
|
|
14
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<ListItemDirective, "\"li[role=option], li[role=group]\"", never, {}, {}, never, never, true, never>;
|
|
14
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<ListItemDirective, "\"li[role=option], li[role=group], li[role=presentation]\"", never, {}, {}, never, never, true, never>;
|
|
15
15
|
}
|
|
@@ -61,6 +61,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
|
|
|
61
61
|
get data(): any[];
|
|
62
62
|
set size(size: DropDownSize);
|
|
63
63
|
get size(): DropDownSize;
|
|
64
|
+
groupedData: any[];
|
|
64
65
|
rounded: DropDownRounded;
|
|
65
66
|
onClick: EventEmitter<any>;
|
|
66
67
|
pageChange: EventEmitter<PageChangeEvent>;
|
|
@@ -103,7 +104,6 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
|
|
|
103
104
|
[propertyName: string]: SimpleChange;
|
|
104
105
|
}): void;
|
|
105
106
|
ngAfterViewInit(): void;
|
|
106
|
-
private setGroupAttributes;
|
|
107
107
|
ngAfterViewChecked(): void;
|
|
108
108
|
ngOnDestroy(): void;
|
|
109
109
|
onCheckedChange(e: Event, index: number): void;
|
|
@@ -116,6 +116,7 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
|
|
|
116
116
|
index(groupIndex: number, itemIndex: number): number;
|
|
117
117
|
getText(dataItem: any): any;
|
|
118
118
|
getValue(dataItem: any): any;
|
|
119
|
+
generateGroupId(dataItem: any): string;
|
|
119
120
|
isDisabled(index: number): boolean;
|
|
120
121
|
isAltRow(index: number): boolean;
|
|
121
122
|
scrollToItem(index: number): void;
|
|
@@ -138,10 +139,6 @@ export declare class ListComponent implements OnChanges, OnDestroy, AfterViewIni
|
|
|
138
139
|
*/
|
|
139
140
|
private hasVirtualScrollbar;
|
|
140
141
|
private positionItems;
|
|
141
|
-
/**
|
|
142
|
-
* Indicates whether the first group header from the data set is in the targeted virtual page.
|
|
143
|
-
*/
|
|
144
|
-
private firstGroupHeaderInTargetedPage;
|
|
145
142
|
private setComponentClasses;
|
|
146
143
|
static ɵfac: i0.ɵɵFactoryDeclaration<ListComponent, never>;
|
|
147
144
|
static ɵcmp: i0.ɵɵComponentDeclaration<ListComponent, "kendo-list", never, { "selected": { "alias": "selected"; "required": false; }; "focused": { "alias": "focused"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "height": { "alias": "height"; "required": false; }; "template": { "alias": "template"; "required": false; }; "groupTemplate": { "alias": "groupTemplate"; "required": false; }; "fixedGroupTemplate": { "alias": "fixedGroupTemplate"; "required": false; }; "show": { "alias": "show"; "required": false; }; "id": { "alias": "id"; "required": false; }; "optionPrefix": { "alias": "optionPrefix"; "required": false; }; "multipleSelection": { "alias": "multipleSelection"; "required": false; }; "virtual": { "alias": "virtual"; "required": false; }; "type": { "alias": "type"; "required": false; }; "checkboxes": { "alias": "checkboxes"; "required": false; }; "ariaLive": { "alias": "ariaLive"; "required": false; }; "isMultiselect": { "alias": "isMultiselect"; "required": false; }; "isActionSheetExpanded": { "alias": "isActionSheetExpanded"; "required": false; }; "showStickyHeader": { "alias": "showStickyHeader"; "required": false; }; "rowWidth": { "alias": "rowWidth"; "required": false; }; "customItemTemplate": { "alias": "customItemTemplate"; "required": false; }; "text": { "alias": "text"; "required": false; }; "allowCustom": { "alias": "allowCustom"; "required": false; }; "defaultItem": { "alias": "defaultItem"; "required": false; }; "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, { "onClick": "onClick"; "pageChange": "pageChange"; "listResize": "listResize"; "popupListScroll": "popupListScroll"; }, never, never, true, never>;
|
|
@@ -13,12 +13,12 @@ export class ListItemDirective {
|
|
|
13
13
|
this.element = element;
|
|
14
14
|
}
|
|
15
15
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
16
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group]\"", ngImport: i0 });
|
|
16
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group], li[role=presentation]\"", ngImport: i0 });
|
|
17
17
|
}
|
|
18
18
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemDirective, decorators: [{
|
|
19
19
|
type: Directive,
|
|
20
20
|
args: [{
|
|
21
|
-
selector: '"li[role=option], li[role=group]"' // eslint-disable-line
|
|
21
|
+
selector: '"li[role=option], li[role=group], li[role=presentation]"' // eslint-disable-line
|
|
22
22
|
,
|
|
23
23
|
standalone: true
|
|
24
24
|
}]
|
|
@@ -61,7 +61,19 @@ export class ListComponent {
|
|
|
61
61
|
allowCustom;
|
|
62
62
|
defaultItem;
|
|
63
63
|
set data(data) {
|
|
64
|
-
this._data = data[0]
|
|
64
|
+
this._data = data[0]?.header ? data.slice(0) : data;
|
|
65
|
+
if (this.dataService.grouped) {
|
|
66
|
+
if (this.virtual) {
|
|
67
|
+
const firstGroupItem = this.dataService.data.find(item => item.header && item.groupIndex === this.data[0].groupIndex);
|
|
68
|
+
if (!this.data[0].header) {
|
|
69
|
+
this._data = [firstGroupItem, ...this._data.slice(1)];
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
this.groupedData = this._data.filter(item => item?.header);
|
|
73
|
+
this.groupedData.forEach(group => {
|
|
74
|
+
group.items = this._data.filter(item => !item.header && item.groupIndex === group.groupIndex);
|
|
75
|
+
});
|
|
76
|
+
}
|
|
65
77
|
}
|
|
66
78
|
get data() {
|
|
67
79
|
return this._data;
|
|
@@ -78,6 +90,7 @@ export class ListComponent {
|
|
|
78
90
|
get size() {
|
|
79
91
|
return this._size;
|
|
80
92
|
}
|
|
93
|
+
groupedData;
|
|
81
94
|
rounded = 'medium';
|
|
82
95
|
onClick = new EventEmitter();
|
|
83
96
|
pageChange = new EventEmitter();
|
|
@@ -157,9 +170,6 @@ export class ListComponent {
|
|
|
157
170
|
this.scrollToFocused = !changes['data'].isFirstChange();
|
|
158
171
|
}
|
|
159
172
|
this.setOverflow();
|
|
160
|
-
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
161
|
-
this.setGroupAttributes();
|
|
162
|
-
});
|
|
163
173
|
}
|
|
164
174
|
if (isChanged('virtual', changes, false)) {
|
|
165
175
|
this.setOverflow();
|
|
@@ -175,31 +185,8 @@ export class ListComponent {
|
|
|
175
185
|
this.lastScrollTop = this.content.nativeElement.scrollTop;
|
|
176
186
|
});
|
|
177
187
|
});
|
|
178
|
-
this.setGroupAttributes();
|
|
179
188
|
this.setOverflow();
|
|
180
189
|
}
|
|
181
|
-
setGroupAttributes() {
|
|
182
|
-
const liItems = document.querySelectorAll('li');
|
|
183
|
-
let isGroup;
|
|
184
|
-
let childrenliItemsIds = [];
|
|
185
|
-
let firstGroupReached = false;
|
|
186
|
-
let previousGroup;
|
|
187
|
-
liItems.forEach((li, idx) => {
|
|
188
|
-
isGroup = li.getAttribute('role') === 'group';
|
|
189
|
-
if (!isGroup && firstGroupReached) {
|
|
190
|
-
this.renderer.setAttribute(li, 'aria-describedby', previousGroup.getAttribute('id'));
|
|
191
|
-
childrenliItemsIds.push(li.getAttribute('id'));
|
|
192
|
-
if (idx + 1 >= liItems.length || liItems[idx + 1]?.getAttribute('role') === 'group') {
|
|
193
|
-
this.renderer.setAttribute(previousGroup, 'aria-owns', childrenliItemsIds.join(' '));
|
|
194
|
-
childrenliItemsIds = [];
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
if (isGroup) {
|
|
198
|
-
firstGroupReached = true;
|
|
199
|
-
previousGroup = li;
|
|
200
|
-
}
|
|
201
|
-
});
|
|
202
|
-
}
|
|
203
190
|
ngAfterViewChecked() {
|
|
204
191
|
if (this.virtual) {
|
|
205
192
|
this.positionItems();
|
|
@@ -274,7 +261,7 @@ export class ListComponent {
|
|
|
274
261
|
const item = this.firstVisibleItem();
|
|
275
262
|
if (item) {
|
|
276
263
|
let index;
|
|
277
|
-
if (item.getAttribute("role") === "
|
|
264
|
+
if (item.getAttribute("role") === "presentation") {
|
|
278
265
|
index = parseInt(item.getAttribute("group-index"), 10);
|
|
279
266
|
this.currentGroup = this.dataService.groupAt(index)?.value;
|
|
280
267
|
}
|
|
@@ -320,7 +307,6 @@ export class ListComponent {
|
|
|
320
307
|
this.lastLoaded = end;
|
|
321
308
|
this.pageChange.emit({ skip: start, take: this.pageSize });
|
|
322
309
|
});
|
|
323
|
-
this.setGroupAttributes();
|
|
324
310
|
}
|
|
325
311
|
index(groupIndex, itemIndex) {
|
|
326
312
|
return groupIndex > 0 ? (this.dataService.groupIndices[groupIndex - 1] + itemIndex) : itemIndex;
|
|
@@ -331,6 +317,9 @@ export class ListComponent {
|
|
|
331
317
|
getValue(dataItem) {
|
|
332
318
|
return getter(dataItem, this.valueField);
|
|
333
319
|
}
|
|
320
|
+
generateGroupId(dataItem) {
|
|
321
|
+
return `${this.optionPrefix}-${dataItem.groupIndex}-${dataItem.value.toString().split(' ').join('')}`;
|
|
322
|
+
}
|
|
334
323
|
isDisabled(index) {
|
|
335
324
|
if (isPresent(this.virtual) && !this.dataService.grouped) {
|
|
336
325
|
index += this.virtual.skip;
|
|
@@ -441,15 +430,6 @@ export class ListComponent {
|
|
|
441
430
|
this.renderer.setStyle(item.element.nativeElement, "transform", `translateY(${offsetY}px`);
|
|
442
431
|
});
|
|
443
432
|
}
|
|
444
|
-
/**
|
|
445
|
-
* Indicates whether the first group header from the data set is in the targeted virtual page.
|
|
446
|
-
*/
|
|
447
|
-
firstGroupHeaderInTargetedPage(itemIndex) {
|
|
448
|
-
if (!isPresent(this.virtual)) {
|
|
449
|
-
return true;
|
|
450
|
-
}
|
|
451
|
-
return this.virtual.skip === 0 && (this.virtual.pageSize > itemIndex);
|
|
452
|
-
}
|
|
453
433
|
setComponentClasses() {
|
|
454
434
|
if (this.type === 'list') {
|
|
455
435
|
this.renderer.addClass(this.wrapper.nativeElement, 'k-list');
|
|
@@ -465,7 +445,7 @@ export class ListComponent {
|
|
|
465
445
|
}
|
|
466
446
|
}
|
|
467
447
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [{ token: i1.DataService }, { token: i0.ElementRef }, { token: i2.SelectionService }, { token: i3.DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i4.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
468
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true
|
|
448
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
469
449
|
<div *ngIf="defaultItem && !template"
|
|
470
450
|
class="k-list-optionlabel"
|
|
471
451
|
[ngClass]="{ 'k-disabled': isDisabledDefaultItem }"
|
|
@@ -519,15 +499,22 @@ export class ListComponent {
|
|
|
519
499
|
[class]="listContentClass"
|
|
520
500
|
[style.maxHeight.px]="height"
|
|
521
501
|
unselectable="on"
|
|
522
|
-
(scroll)="popupListScroll.emit($event)"
|
|
502
|
+
(scroll)="popupListScroll.emit($event)"
|
|
503
|
+
[attr.role]="dataService.grouped ? 'listbox' : null"
|
|
504
|
+
[attr.id]="dataService.grouped ? id : null"
|
|
505
|
+
[attr.aria-live]="dataService.grouped ? ariaLive : null"
|
|
506
|
+
[attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
|
|
507
|
+
[attr.aria-hidden]="dataService.grouped ? !show : null"
|
|
508
|
+
>
|
|
523
509
|
<ul #list
|
|
524
|
-
|
|
510
|
+
*ngIf="!dataService.grouped"
|
|
511
|
+
[attr.role]="'listbox'"
|
|
525
512
|
[class]="listClass"
|
|
526
513
|
[attr.id]="id"
|
|
527
514
|
[attr.aria-live]="ariaLive"
|
|
528
515
|
[attr.aria-multiselectable]="isMultiselect"
|
|
529
516
|
[attr.aria-hidden]="!show">
|
|
530
|
-
<ng-
|
|
517
|
+
<ng-container *ngFor="let dataItem of data; let itemIndex = index">
|
|
531
518
|
<li
|
|
532
519
|
role="option"
|
|
533
520
|
kendoDropDownsSelectable
|
|
@@ -563,73 +550,81 @@ export class ListComponent {
|
|
|
563
550
|
</ng-template>
|
|
564
551
|
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
|
|
565
552
|
</li>
|
|
566
|
-
</ng-
|
|
567
|
-
<
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
553
|
+
</ng-container>
|
|
554
|
+
<kendo-resize-sensor
|
|
555
|
+
*ngIf="!virtual"
|
|
556
|
+
(resize)="listResize.emit()"
|
|
557
|
+
>
|
|
558
|
+
</kendo-resize-sensor>
|
|
559
|
+
</ul>
|
|
560
|
+
|
|
561
|
+
<ng-container *ngIf="dataService.grouped" #list>
|
|
562
|
+
<ul *ngFor="let dataItem of groupedData"
|
|
563
|
+
#groupUl
|
|
564
|
+
class="k-list-ul"
|
|
565
|
+
[attr.role]="'group'"
|
|
566
|
+
[attr.aria-labelledby]="generateGroupId(dataItem)"
|
|
567
|
+
>
|
|
568
|
+
<li *ngIf="dataItem.header"
|
|
569
|
+
role="presentation"
|
|
572
570
|
[class]="listGroupItemClass"
|
|
573
|
-
[class.k-table-alt-row]="isAltRow(
|
|
571
|
+
[class.k-table-alt-row]="isAltRow(dataItem.index - 1)"
|
|
574
572
|
[ngStyle]="{
|
|
575
573
|
'height.px': virtual?.itemHeight,
|
|
576
574
|
'minHeight.px' : virtual?.itemHeight,
|
|
577
575
|
'boxSizing' : virtual ? 'border-box' : 'inherit'}"
|
|
578
576
|
[attr.group-index]="dataItem.index"
|
|
579
|
-
[attr.id]="
|
|
580
|
-
[
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
577
|
+
[attr.id]="groupUl.getAttribute('aria-labelledby')"
|
|
578
|
+
[style.width.px]="rowWidth ?? null"
|
|
579
|
+
>
|
|
580
|
+
<span [class]="listGroupItemTextClass">
|
|
581
|
+
<ng-template *ngIf="groupTemplate"
|
|
582
|
+
[templateContext]="{
|
|
583
|
+
templateRef: groupTemplate.templateRef,
|
|
584
|
+
$implicit: dataItem.value
|
|
585
|
+
}">
|
|
586
|
+
</ng-template>
|
|
587
|
+
<ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
|
|
588
|
+
</span>
|
|
591
589
|
</li>
|
|
592
|
-
<li
|
|
593
|
-
#li
|
|
594
|
-
*ngIf="!dataItem.header"
|
|
590
|
+
<li *ngFor="let item of dataItem.items"
|
|
595
591
|
role="option"
|
|
596
592
|
kendoDropDownsSelectable
|
|
597
593
|
[height]="virtual?.itemHeight"
|
|
598
|
-
[index]="
|
|
594
|
+
[index]="item.offsetIndex"
|
|
599
595
|
[multipleSelection]="multipleSelection"
|
|
600
|
-
[attr.absolute-index]="
|
|
601
|
-
[attr.id]="optionPrefix + '-' + (
|
|
596
|
+
[attr.absolute-index]="item.index"
|
|
597
|
+
[attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
|
|
602
598
|
[attr.tabIndex]="-1"
|
|
603
|
-
[attr.aria-selected]="isItemSelected(
|
|
599
|
+
[attr.aria-selected]="isItemSelected(item.offsetIndex)"
|
|
604
600
|
[class]="listItemClass"
|
|
605
601
|
[ngClass]="{
|
|
606
|
-
'k-disabled': isDisabled(
|
|
607
|
-
'k-table-alt-row': isAltRow(
|
|
602
|
+
'k-disabled': isDisabled(item.offsetIndex),
|
|
603
|
+
'k-table-alt-row': isAltRow(item.index - 1)
|
|
608
604
|
}"
|
|
609
|
-
[style.width.px]="rowWidth ?? null"
|
|
610
|
-
>
|
|
605
|
+
[style.width.px]="rowWidth ?? null">
|
|
611
606
|
<ng-template *ngIf="template"
|
|
612
607
|
[templateContext]="{
|
|
613
608
|
templateRef: template.templateRef,
|
|
614
|
-
$implicit:
|
|
609
|
+
$implicit: item.value
|
|
615
610
|
}">
|
|
616
611
|
</ng-template>
|
|
617
|
-
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(
|
|
612
|
+
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(item.value) }}</span></ng-template>
|
|
618
613
|
</li>
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
</
|
|
625
|
-
</
|
|
614
|
+
<kendo-resize-sensor
|
|
615
|
+
*ngIf="!virtual"
|
|
616
|
+
(resize)="listResize.emit()"
|
|
617
|
+
>
|
|
618
|
+
</kendo-resize-sensor>
|
|
619
|
+
</ul>
|
|
620
|
+
</ng-container>
|
|
626
621
|
<div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
|
|
627
622
|
<div [style.height.px]="scrollHeight">
|
|
628
623
|
<kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
|
|
629
624
|
</div>
|
|
630
625
|
</div>
|
|
631
626
|
</div>
|
|
632
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
627
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group], li[role=presentation]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
633
628
|
}
|
|
634
629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
|
|
635
630
|
type: Component,
|
|
@@ -689,15 +684,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
689
684
|
[class]="listContentClass"
|
|
690
685
|
[style.maxHeight.px]="height"
|
|
691
686
|
unselectable="on"
|
|
692
|
-
(scroll)="popupListScroll.emit($event)"
|
|
687
|
+
(scroll)="popupListScroll.emit($event)"
|
|
688
|
+
[attr.role]="dataService.grouped ? 'listbox' : null"
|
|
689
|
+
[attr.id]="dataService.grouped ? id : null"
|
|
690
|
+
[attr.aria-live]="dataService.grouped ? ariaLive : null"
|
|
691
|
+
[attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
|
|
692
|
+
[attr.aria-hidden]="dataService.grouped ? !show : null"
|
|
693
|
+
>
|
|
693
694
|
<ul #list
|
|
694
|
-
|
|
695
|
+
*ngIf="!dataService.grouped"
|
|
696
|
+
[attr.role]="'listbox'"
|
|
695
697
|
[class]="listClass"
|
|
696
698
|
[attr.id]="id"
|
|
697
699
|
[attr.aria-live]="ariaLive"
|
|
698
700
|
[attr.aria-multiselectable]="isMultiselect"
|
|
699
701
|
[attr.aria-hidden]="!show">
|
|
700
|
-
<ng-
|
|
702
|
+
<ng-container *ngFor="let dataItem of data; let itemIndex = index">
|
|
701
703
|
<li
|
|
702
704
|
role="option"
|
|
703
705
|
kendoDropDownsSelectable
|
|
@@ -733,66 +735,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
733
735
|
</ng-template>
|
|
734
736
|
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
|
|
735
737
|
</li>
|
|
736
|
-
</ng-
|
|
737
|
-
<
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
738
|
+
</ng-container>
|
|
739
|
+
<kendo-resize-sensor
|
|
740
|
+
*ngIf="!virtual"
|
|
741
|
+
(resize)="listResize.emit()"
|
|
742
|
+
>
|
|
743
|
+
</kendo-resize-sensor>
|
|
744
|
+
</ul>
|
|
745
|
+
|
|
746
|
+
<ng-container *ngIf="dataService.grouped" #list>
|
|
747
|
+
<ul *ngFor="let dataItem of groupedData"
|
|
748
|
+
#groupUl
|
|
749
|
+
class="k-list-ul"
|
|
750
|
+
[attr.role]="'group'"
|
|
751
|
+
[attr.aria-labelledby]="generateGroupId(dataItem)"
|
|
752
|
+
>
|
|
753
|
+
<li *ngIf="dataItem.header"
|
|
754
|
+
role="presentation"
|
|
742
755
|
[class]="listGroupItemClass"
|
|
743
|
-
[class.k-table-alt-row]="isAltRow(
|
|
756
|
+
[class.k-table-alt-row]="isAltRow(dataItem.index - 1)"
|
|
744
757
|
[ngStyle]="{
|
|
745
758
|
'height.px': virtual?.itemHeight,
|
|
746
759
|
'minHeight.px' : virtual?.itemHeight,
|
|
747
760
|
'boxSizing' : virtual ? 'border-box' : 'inherit'}"
|
|
748
761
|
[attr.group-index]="dataItem.index"
|
|
749
|
-
[attr.id]="
|
|
750
|
-
[
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
762
|
+
[attr.id]="groupUl.getAttribute('aria-labelledby')"
|
|
763
|
+
[style.width.px]="rowWidth ?? null"
|
|
764
|
+
>
|
|
765
|
+
<span [class]="listGroupItemTextClass">
|
|
766
|
+
<ng-template *ngIf="groupTemplate"
|
|
767
|
+
[templateContext]="{
|
|
768
|
+
templateRef: groupTemplate.templateRef,
|
|
769
|
+
$implicit: dataItem.value
|
|
770
|
+
}">
|
|
771
|
+
</ng-template>
|
|
772
|
+
<ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
|
|
773
|
+
</span>
|
|
761
774
|
</li>
|
|
762
|
-
<li
|
|
763
|
-
#li
|
|
764
|
-
*ngIf="!dataItem.header"
|
|
775
|
+
<li *ngFor="let item of dataItem.items"
|
|
765
776
|
role="option"
|
|
766
777
|
kendoDropDownsSelectable
|
|
767
778
|
[height]="virtual?.itemHeight"
|
|
768
|
-
[index]="
|
|
779
|
+
[index]="item.offsetIndex"
|
|
769
780
|
[multipleSelection]="multipleSelection"
|
|
770
|
-
[attr.absolute-index]="
|
|
771
|
-
[attr.id]="optionPrefix + '-' + (
|
|
781
|
+
[attr.absolute-index]="item.index"
|
|
782
|
+
[attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
|
|
772
783
|
[attr.tabIndex]="-1"
|
|
773
|
-
[attr.aria-selected]="isItemSelected(
|
|
784
|
+
[attr.aria-selected]="isItemSelected(item.offsetIndex)"
|
|
774
785
|
[class]="listItemClass"
|
|
775
786
|
[ngClass]="{
|
|
776
|
-
'k-disabled': isDisabled(
|
|
777
|
-
'k-table-alt-row': isAltRow(
|
|
787
|
+
'k-disabled': isDisabled(item.offsetIndex),
|
|
788
|
+
'k-table-alt-row': isAltRow(item.index - 1)
|
|
778
789
|
}"
|
|
779
|
-
[style.width.px]="rowWidth ?? null"
|
|
780
|
-
>
|
|
790
|
+
[style.width.px]="rowWidth ?? null">
|
|
781
791
|
<ng-template *ngIf="template"
|
|
782
792
|
[templateContext]="{
|
|
783
793
|
templateRef: template.templateRef,
|
|
784
|
-
$implicit:
|
|
794
|
+
$implicit: item.value
|
|
785
795
|
}">
|
|
786
796
|
</ng-template>
|
|
787
|
-
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(
|
|
797
|
+
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(item.value) }}</span></ng-template>
|
|
788
798
|
</li>
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
</
|
|
795
|
-
</
|
|
799
|
+
<kendo-resize-sensor
|
|
800
|
+
*ngIf="!virtual"
|
|
801
|
+
(resize)="listResize.emit()"
|
|
802
|
+
>
|
|
803
|
+
</kendo-resize-sensor>
|
|
804
|
+
</ul>
|
|
805
|
+
</ng-container>
|
|
796
806
|
<div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
|
|
797
807
|
<div [style.height.px]="scrollHeight">
|
|
798
808
|
<kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
|
|
@@ -873,8 +883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
873
883
|
args: ['content', { static: true }]
|
|
874
884
|
}], list: [{
|
|
875
885
|
type: ViewChild,
|
|
876
|
-
args: ['list'
|
|
886
|
+
args: ['list']
|
|
877
887
|
}], virtualContainer: [{
|
|
878
888
|
type: ViewChild,
|
|
879
|
-
args: ['virtualContainer'
|
|
889
|
+
args: ['virtualContainer']
|
|
880
890
|
}] } });
|
|
@@ -10,7 +10,7 @@ export const packageMetadata = {
|
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCode: 'KENDOUIANGULAR',
|
|
12
12
|
productCodes: ['KENDOUIANGULAR'],
|
|
13
|
-
publishDate:
|
|
14
|
-
version: '21.0.0-develop.
|
|
13
|
+
publishDate: 1761814587,
|
|
14
|
+
version: '21.0.0-develop.5',
|
|
15
15
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
16
16
|
};
|
|
@@ -37,8 +37,8 @@ const packageMetadata = {
|
|
|
37
37
|
productName: 'Kendo UI for Angular',
|
|
38
38
|
productCode: 'KENDOUIANGULAR',
|
|
39
39
|
productCodes: ['KENDOUIANGULAR'],
|
|
40
|
-
publishDate:
|
|
41
|
-
version: '21.0.0-develop.
|
|
40
|
+
publishDate: 1761814587,
|
|
41
|
+
version: '21.0.0-develop.5',
|
|
42
42
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
43
43
|
};
|
|
44
44
|
|
|
@@ -1771,12 +1771,12 @@ class ListItemDirective {
|
|
|
1771
1771
|
this.element = element;
|
|
1772
1772
|
}
|
|
1773
1773
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1774
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group]\"", ngImport: i0 });
|
|
1774
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ListItemDirective, isStandalone: true, selector: "\"li[role=option], li[role=group], li[role=presentation]\"", ngImport: i0 });
|
|
1775
1775
|
}
|
|
1776
1776
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListItemDirective, decorators: [{
|
|
1777
1777
|
type: Directive,
|
|
1778
1778
|
args: [{
|
|
1779
|
-
selector: '"li[role=option], li[role=group]"' // eslint-disable-line
|
|
1779
|
+
selector: '"li[role=option], li[role=group], li[role=presentation]"' // eslint-disable-line
|
|
1780
1780
|
,
|
|
1781
1781
|
standalone: true
|
|
1782
1782
|
}]
|
|
@@ -1938,7 +1938,19 @@ class ListComponent {
|
|
|
1938
1938
|
allowCustom;
|
|
1939
1939
|
defaultItem;
|
|
1940
1940
|
set data(data) {
|
|
1941
|
-
this._data = data[0]
|
|
1941
|
+
this._data = data[0]?.header ? data.slice(0) : data;
|
|
1942
|
+
if (this.dataService.grouped) {
|
|
1943
|
+
if (this.virtual) {
|
|
1944
|
+
const firstGroupItem = this.dataService.data.find(item => item.header && item.groupIndex === this.data[0].groupIndex);
|
|
1945
|
+
if (!this.data[0].header) {
|
|
1946
|
+
this._data = [firstGroupItem, ...this._data.slice(1)];
|
|
1947
|
+
}
|
|
1948
|
+
}
|
|
1949
|
+
this.groupedData = this._data.filter(item => item?.header);
|
|
1950
|
+
this.groupedData.forEach(group => {
|
|
1951
|
+
group.items = this._data.filter(item => !item.header && item.groupIndex === group.groupIndex);
|
|
1952
|
+
});
|
|
1953
|
+
}
|
|
1942
1954
|
}
|
|
1943
1955
|
get data() {
|
|
1944
1956
|
return this._data;
|
|
@@ -1955,6 +1967,7 @@ class ListComponent {
|
|
|
1955
1967
|
get size() {
|
|
1956
1968
|
return this._size;
|
|
1957
1969
|
}
|
|
1970
|
+
groupedData;
|
|
1958
1971
|
rounded = 'medium';
|
|
1959
1972
|
onClick = new EventEmitter();
|
|
1960
1973
|
pageChange = new EventEmitter();
|
|
@@ -2034,9 +2047,6 @@ class ListComponent {
|
|
|
2034
2047
|
this.scrollToFocused = !changes['data'].isFirstChange();
|
|
2035
2048
|
}
|
|
2036
2049
|
this.setOverflow();
|
|
2037
|
-
this.zone.onStable.pipe(take(1)).subscribe(() => {
|
|
2038
|
-
this.setGroupAttributes();
|
|
2039
|
-
});
|
|
2040
2050
|
}
|
|
2041
2051
|
if (isChanged('virtual', changes, false)) {
|
|
2042
2052
|
this.setOverflow();
|
|
@@ -2052,31 +2062,8 @@ class ListComponent {
|
|
|
2052
2062
|
this.lastScrollTop = this.content.nativeElement.scrollTop;
|
|
2053
2063
|
});
|
|
2054
2064
|
});
|
|
2055
|
-
this.setGroupAttributes();
|
|
2056
2065
|
this.setOverflow();
|
|
2057
2066
|
}
|
|
2058
|
-
setGroupAttributes() {
|
|
2059
|
-
const liItems = document.querySelectorAll('li');
|
|
2060
|
-
let isGroup;
|
|
2061
|
-
let childrenliItemsIds = [];
|
|
2062
|
-
let firstGroupReached = false;
|
|
2063
|
-
let previousGroup;
|
|
2064
|
-
liItems.forEach((li, idx) => {
|
|
2065
|
-
isGroup = li.getAttribute('role') === 'group';
|
|
2066
|
-
if (!isGroup && firstGroupReached) {
|
|
2067
|
-
this.renderer.setAttribute(li, 'aria-describedby', previousGroup.getAttribute('id'));
|
|
2068
|
-
childrenliItemsIds.push(li.getAttribute('id'));
|
|
2069
|
-
if (idx + 1 >= liItems.length || liItems[idx + 1]?.getAttribute('role') === 'group') {
|
|
2070
|
-
this.renderer.setAttribute(previousGroup, 'aria-owns', childrenliItemsIds.join(' '));
|
|
2071
|
-
childrenliItemsIds = [];
|
|
2072
|
-
}
|
|
2073
|
-
}
|
|
2074
|
-
if (isGroup) {
|
|
2075
|
-
firstGroupReached = true;
|
|
2076
|
-
previousGroup = li;
|
|
2077
|
-
}
|
|
2078
|
-
});
|
|
2079
|
-
}
|
|
2080
2067
|
ngAfterViewChecked() {
|
|
2081
2068
|
if (this.virtual) {
|
|
2082
2069
|
this.positionItems();
|
|
@@ -2151,7 +2138,7 @@ class ListComponent {
|
|
|
2151
2138
|
const item = this.firstVisibleItem();
|
|
2152
2139
|
if (item) {
|
|
2153
2140
|
let index;
|
|
2154
|
-
if (item.getAttribute("role") === "
|
|
2141
|
+
if (item.getAttribute("role") === "presentation") {
|
|
2155
2142
|
index = parseInt(item.getAttribute("group-index"), 10);
|
|
2156
2143
|
this.currentGroup = this.dataService.groupAt(index)?.value;
|
|
2157
2144
|
}
|
|
@@ -2197,7 +2184,6 @@ class ListComponent {
|
|
|
2197
2184
|
this.lastLoaded = end;
|
|
2198
2185
|
this.pageChange.emit({ skip: start, take: this.pageSize });
|
|
2199
2186
|
});
|
|
2200
|
-
this.setGroupAttributes();
|
|
2201
2187
|
}
|
|
2202
2188
|
index(groupIndex, itemIndex) {
|
|
2203
2189
|
return groupIndex > 0 ? (this.dataService.groupIndices[groupIndex - 1] + itemIndex) : itemIndex;
|
|
@@ -2208,6 +2194,9 @@ class ListComponent {
|
|
|
2208
2194
|
getValue(dataItem) {
|
|
2209
2195
|
return getter(dataItem, this.valueField);
|
|
2210
2196
|
}
|
|
2197
|
+
generateGroupId(dataItem) {
|
|
2198
|
+
return `${this.optionPrefix}-${dataItem.groupIndex}-${dataItem.value.toString().split(' ').join('')}`;
|
|
2199
|
+
}
|
|
2211
2200
|
isDisabled(index) {
|
|
2212
2201
|
if (isPresent(this.virtual) && !this.dataService.grouped) {
|
|
2213
2202
|
index += this.virtual.skip;
|
|
@@ -2318,15 +2307,6 @@ class ListComponent {
|
|
|
2318
2307
|
this.renderer.setStyle(item.element.nativeElement, "transform", `translateY(${offsetY}px`);
|
|
2319
2308
|
});
|
|
2320
2309
|
}
|
|
2321
|
-
/**
|
|
2322
|
-
* Indicates whether the first group header from the data set is in the targeted virtual page.
|
|
2323
|
-
*/
|
|
2324
|
-
firstGroupHeaderInTargetedPage(itemIndex) {
|
|
2325
|
-
if (!isPresent(this.virtual)) {
|
|
2326
|
-
return true;
|
|
2327
|
-
}
|
|
2328
|
-
return this.virtual.skip === 0 && (this.virtual.pageSize > itemIndex);
|
|
2329
|
-
}
|
|
2330
2310
|
setComponentClasses() {
|
|
2331
2311
|
if (this.type === 'list') {
|
|
2332
2312
|
this.renderer.addClass(this.wrapper.nativeElement, 'k-list');
|
|
@@ -2342,7 +2322,7 @@ class ListComponent {
|
|
|
2342
2322
|
}
|
|
2343
2323
|
}
|
|
2344
2324
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, deps: [{ token: DataService }, { token: i0.ElementRef }, { token: SelectionService }, { token: DisabledItemsService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2345
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true
|
|
2325
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ListComponent, isStandalone: true, selector: "kendo-list", inputs: { selected: "selected", focused: "focused", textField: "textField", valueField: "valueField", height: "height", template: "template", groupTemplate: "groupTemplate", fixedGroupTemplate: "fixedGroupTemplate", show: "show", id: "id", optionPrefix: "optionPrefix", multipleSelection: "multipleSelection", virtual: "virtual", type: "type", checkboxes: "checkboxes", ariaLive: "ariaLive", isMultiselect: "isMultiselect", isActionSheetExpanded: "isActionSheetExpanded", showStickyHeader: "showStickyHeader", rowWidth: "rowWidth", customItemTemplate: "customItemTemplate", text: "text", allowCustom: "allowCustom", defaultItem: "defaultItem", data: "data", size: "size", rounded: "rounded" }, outputs: { onClick: "onClick", pageChange: "pageChange", listResize: "listResize", popupListScroll: "popupListScroll" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "virtualContainer", first: true, predicate: ["virtualContainer"], descendants: true }, { propertyName: "items", predicate: ListItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
2346
2326
|
<div *ngIf="defaultItem && !template"
|
|
2347
2327
|
class="k-list-optionlabel"
|
|
2348
2328
|
[ngClass]="{ 'k-disabled': isDisabledDefaultItem }"
|
|
@@ -2396,15 +2376,22 @@ class ListComponent {
|
|
|
2396
2376
|
[class]="listContentClass"
|
|
2397
2377
|
[style.maxHeight.px]="height"
|
|
2398
2378
|
unselectable="on"
|
|
2399
|
-
(scroll)="popupListScroll.emit($event)"
|
|
2379
|
+
(scroll)="popupListScroll.emit($event)"
|
|
2380
|
+
[attr.role]="dataService.grouped ? 'listbox' : null"
|
|
2381
|
+
[attr.id]="dataService.grouped ? id : null"
|
|
2382
|
+
[attr.aria-live]="dataService.grouped ? ariaLive : null"
|
|
2383
|
+
[attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
|
|
2384
|
+
[attr.aria-hidden]="dataService.grouped ? !show : null"
|
|
2385
|
+
>
|
|
2400
2386
|
<ul #list
|
|
2401
|
-
|
|
2387
|
+
*ngIf="!dataService.grouped"
|
|
2388
|
+
[attr.role]="'listbox'"
|
|
2402
2389
|
[class]="listClass"
|
|
2403
2390
|
[attr.id]="id"
|
|
2404
2391
|
[attr.aria-live]="ariaLive"
|
|
2405
2392
|
[attr.aria-multiselectable]="isMultiselect"
|
|
2406
2393
|
[attr.aria-hidden]="!show">
|
|
2407
|
-
<ng-
|
|
2394
|
+
<ng-container *ngFor="let dataItem of data; let itemIndex = index">
|
|
2408
2395
|
<li
|
|
2409
2396
|
role="option"
|
|
2410
2397
|
kendoDropDownsSelectable
|
|
@@ -2440,73 +2427,81 @@ class ListComponent {
|
|
|
2440
2427
|
</ng-template>
|
|
2441
2428
|
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
|
|
2442
2429
|
</li>
|
|
2443
|
-
</ng-
|
|
2444
|
-
<
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2430
|
+
</ng-container>
|
|
2431
|
+
<kendo-resize-sensor
|
|
2432
|
+
*ngIf="!virtual"
|
|
2433
|
+
(resize)="listResize.emit()"
|
|
2434
|
+
>
|
|
2435
|
+
</kendo-resize-sensor>
|
|
2436
|
+
</ul>
|
|
2437
|
+
|
|
2438
|
+
<ng-container *ngIf="dataService.grouped" #list>
|
|
2439
|
+
<ul *ngFor="let dataItem of groupedData"
|
|
2440
|
+
#groupUl
|
|
2441
|
+
class="k-list-ul"
|
|
2442
|
+
[attr.role]="'group'"
|
|
2443
|
+
[attr.aria-labelledby]="generateGroupId(dataItem)"
|
|
2444
|
+
>
|
|
2445
|
+
<li *ngIf="dataItem.header"
|
|
2446
|
+
role="presentation"
|
|
2449
2447
|
[class]="listGroupItemClass"
|
|
2450
|
-
[class.k-table-alt-row]="isAltRow(
|
|
2448
|
+
[class.k-table-alt-row]="isAltRow(dataItem.index - 1)"
|
|
2451
2449
|
[ngStyle]="{
|
|
2452
2450
|
'height.px': virtual?.itemHeight,
|
|
2453
2451
|
'minHeight.px' : virtual?.itemHeight,
|
|
2454
2452
|
'boxSizing' : virtual ? 'border-box' : 'inherit'}"
|
|
2455
2453
|
[attr.group-index]="dataItem.index"
|
|
2456
|
-
[attr.id]="
|
|
2457
|
-
[
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2454
|
+
[attr.id]="groupUl.getAttribute('aria-labelledby')"
|
|
2455
|
+
[style.width.px]="rowWidth ?? null"
|
|
2456
|
+
>
|
|
2457
|
+
<span [class]="listGroupItemTextClass">
|
|
2458
|
+
<ng-template *ngIf="groupTemplate"
|
|
2459
|
+
[templateContext]="{
|
|
2460
|
+
templateRef: groupTemplate.templateRef,
|
|
2461
|
+
$implicit: dataItem.value
|
|
2462
|
+
}">
|
|
2463
|
+
</ng-template>
|
|
2464
|
+
<ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
|
|
2465
|
+
</span>
|
|
2468
2466
|
</li>
|
|
2469
|
-
<li
|
|
2470
|
-
#li
|
|
2471
|
-
*ngIf="!dataItem.header"
|
|
2467
|
+
<li *ngFor="let item of dataItem.items"
|
|
2472
2468
|
role="option"
|
|
2473
2469
|
kendoDropDownsSelectable
|
|
2474
2470
|
[height]="virtual?.itemHeight"
|
|
2475
|
-
[index]="
|
|
2471
|
+
[index]="item.offsetIndex"
|
|
2476
2472
|
[multipleSelection]="multipleSelection"
|
|
2477
|
-
[attr.absolute-index]="
|
|
2478
|
-
[attr.id]="optionPrefix + '-' + (
|
|
2473
|
+
[attr.absolute-index]="item.index"
|
|
2474
|
+
[attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
|
|
2479
2475
|
[attr.tabIndex]="-1"
|
|
2480
|
-
[attr.aria-selected]="isItemSelected(
|
|
2476
|
+
[attr.aria-selected]="isItemSelected(item.offsetIndex)"
|
|
2481
2477
|
[class]="listItemClass"
|
|
2482
2478
|
[ngClass]="{
|
|
2483
|
-
'k-disabled': isDisabled(
|
|
2484
|
-
'k-table-alt-row': isAltRow(
|
|
2479
|
+
'k-disabled': isDisabled(item.offsetIndex),
|
|
2480
|
+
'k-table-alt-row': isAltRow(item.index - 1)
|
|
2485
2481
|
}"
|
|
2486
|
-
[style.width.px]="rowWidth ?? null"
|
|
2487
|
-
>
|
|
2482
|
+
[style.width.px]="rowWidth ?? null">
|
|
2488
2483
|
<ng-template *ngIf="template"
|
|
2489
2484
|
[templateContext]="{
|
|
2490
2485
|
templateRef: template.templateRef,
|
|
2491
|
-
$implicit:
|
|
2486
|
+
$implicit: item.value
|
|
2492
2487
|
}">
|
|
2493
2488
|
</ng-template>
|
|
2494
|
-
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(
|
|
2489
|
+
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(item.value) }}</span></ng-template>
|
|
2495
2490
|
</li>
|
|
2496
|
-
|
|
2497
|
-
|
|
2498
|
-
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
</
|
|
2502
|
-
</
|
|
2491
|
+
<kendo-resize-sensor
|
|
2492
|
+
*ngIf="!virtual"
|
|
2493
|
+
(resize)="listResize.emit()"
|
|
2494
|
+
>
|
|
2495
|
+
</kendo-resize-sensor>
|
|
2496
|
+
</ul>
|
|
2497
|
+
</ng-container>
|
|
2503
2498
|
<div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
|
|
2504
2499
|
<div [style.height.px]="scrollHeight">
|
|
2505
2500
|
<kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
|
|
2506
2501
|
</div>
|
|
2507
2502
|
</div>
|
|
2508
2503
|
</div>
|
|
2509
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
2504
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: ListItemDirective, selector: "\"li[role=option], li[role=group], li[role=presentation]\"" }, { kind: "directive", type: SelectableDirective, selector: "[kendoDropDownsSelectable]", inputs: ["index", "checkboxes", "height", "isMultiselect", "multipleSelection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
|
|
2510
2505
|
}
|
|
2511
2506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ListComponent, decorators: [{
|
|
2512
2507
|
type: Component,
|
|
@@ -2566,15 +2561,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2566
2561
|
[class]="listContentClass"
|
|
2567
2562
|
[style.maxHeight.px]="height"
|
|
2568
2563
|
unselectable="on"
|
|
2569
|
-
(scroll)="popupListScroll.emit($event)"
|
|
2564
|
+
(scroll)="popupListScroll.emit($event)"
|
|
2565
|
+
[attr.role]="dataService.grouped ? 'listbox' : null"
|
|
2566
|
+
[attr.id]="dataService.grouped ? id : null"
|
|
2567
|
+
[attr.aria-live]="dataService.grouped ? ariaLive : null"
|
|
2568
|
+
[attr.aria-multiselectable]="dataService.grouped ? isMultiselect : null"
|
|
2569
|
+
[attr.aria-hidden]="dataService.grouped ? !show : null"
|
|
2570
|
+
>
|
|
2570
2571
|
<ul #list
|
|
2571
|
-
|
|
2572
|
+
*ngIf="!dataService.grouped"
|
|
2573
|
+
[attr.role]="'listbox'"
|
|
2572
2574
|
[class]="listClass"
|
|
2573
2575
|
[attr.id]="id"
|
|
2574
2576
|
[attr.aria-live]="ariaLive"
|
|
2575
2577
|
[attr.aria-multiselectable]="isMultiselect"
|
|
2576
2578
|
[attr.aria-hidden]="!show">
|
|
2577
|
-
<ng-
|
|
2579
|
+
<ng-container *ngFor="let dataItem of data; let itemIndex = index">
|
|
2578
2580
|
<li
|
|
2579
2581
|
role="option"
|
|
2580
2582
|
kendoDropDownsSelectable
|
|
@@ -2610,66 +2612,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2610
2612
|
</ng-template>
|
|
2611
2613
|
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(dataItem) }}</span></ng-template>
|
|
2612
2614
|
</li>
|
|
2613
|
-
</ng-
|
|
2614
|
-
<
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2615
|
+
</ng-container>
|
|
2616
|
+
<kendo-resize-sensor
|
|
2617
|
+
*ngIf="!virtual"
|
|
2618
|
+
(resize)="listResize.emit()"
|
|
2619
|
+
>
|
|
2620
|
+
</kendo-resize-sensor>
|
|
2621
|
+
</ul>
|
|
2622
|
+
|
|
2623
|
+
<ng-container *ngIf="dataService.grouped" #list>
|
|
2624
|
+
<ul *ngFor="let dataItem of groupedData"
|
|
2625
|
+
#groupUl
|
|
2626
|
+
class="k-list-ul"
|
|
2627
|
+
[attr.role]="'group'"
|
|
2628
|
+
[attr.aria-labelledby]="generateGroupId(dataItem)"
|
|
2629
|
+
>
|
|
2630
|
+
<li *ngIf="dataItem.header"
|
|
2631
|
+
role="presentation"
|
|
2619
2632
|
[class]="listGroupItemClass"
|
|
2620
|
-
[class.k-table-alt-row]="isAltRow(
|
|
2633
|
+
[class.k-table-alt-row]="isAltRow(dataItem.index - 1)"
|
|
2621
2634
|
[ngStyle]="{
|
|
2622
2635
|
'height.px': virtual?.itemHeight,
|
|
2623
2636
|
'minHeight.px' : virtual?.itemHeight,
|
|
2624
2637
|
'boxSizing' : virtual ? 'border-box' : 'inherit'}"
|
|
2625
2638
|
[attr.group-index]="dataItem.index"
|
|
2626
|
-
[attr.id]="
|
|
2627
|
-
[
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2639
|
+
[attr.id]="groupUl.getAttribute('aria-labelledby')"
|
|
2640
|
+
[style.width.px]="rowWidth ?? null"
|
|
2641
|
+
>
|
|
2642
|
+
<span [class]="listGroupItemTextClass">
|
|
2643
|
+
<ng-template *ngIf="groupTemplate"
|
|
2644
|
+
[templateContext]="{
|
|
2645
|
+
templateRef: groupTemplate.templateRef,
|
|
2646
|
+
$implicit: dataItem.value
|
|
2647
|
+
}">
|
|
2648
|
+
</ng-template>
|
|
2649
|
+
<ng-template [ngIf]="!groupTemplate">{{ dataItem.value }}</ng-template>
|
|
2650
|
+
</span>
|
|
2638
2651
|
</li>
|
|
2639
|
-
<li
|
|
2640
|
-
#li
|
|
2641
|
-
*ngIf="!dataItem.header"
|
|
2652
|
+
<li *ngFor="let item of dataItem.items"
|
|
2642
2653
|
role="option"
|
|
2643
2654
|
kendoDropDownsSelectable
|
|
2644
2655
|
[height]="virtual?.itemHeight"
|
|
2645
|
-
[index]="
|
|
2656
|
+
[index]="item.offsetIndex"
|
|
2646
2657
|
[multipleSelection]="multipleSelection"
|
|
2647
|
-
[attr.absolute-index]="
|
|
2648
|
-
[attr.id]="optionPrefix + '-' + (
|
|
2658
|
+
[attr.absolute-index]="item.index"
|
|
2659
|
+
[attr.id]="optionPrefix + '-' + (item.index - 1 - item.groupIndex)"
|
|
2649
2660
|
[attr.tabIndex]="-1"
|
|
2650
|
-
[attr.aria-selected]="isItemSelected(
|
|
2661
|
+
[attr.aria-selected]="isItemSelected(item.offsetIndex)"
|
|
2651
2662
|
[class]="listItemClass"
|
|
2652
2663
|
[ngClass]="{
|
|
2653
|
-
'k-disabled': isDisabled(
|
|
2654
|
-
'k-table-alt-row': isAltRow(
|
|
2664
|
+
'k-disabled': isDisabled(item.offsetIndex),
|
|
2665
|
+
'k-table-alt-row': isAltRow(item.index - 1)
|
|
2655
2666
|
}"
|
|
2656
|
-
[style.width.px]="rowWidth ?? null"
|
|
2657
|
-
>
|
|
2667
|
+
[style.width.px]="rowWidth ?? null">
|
|
2658
2668
|
<ng-template *ngIf="template"
|
|
2659
2669
|
[templateContext]="{
|
|
2660
2670
|
templateRef: template.templateRef,
|
|
2661
|
-
$implicit:
|
|
2671
|
+
$implicit: item.value
|
|
2662
2672
|
}">
|
|
2663
2673
|
</ng-template>
|
|
2664
|
-
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(
|
|
2674
|
+
<ng-template [ngIf]="!template"><span class="k-list-item-text">{{ getText(item.value) }}</span></ng-template>
|
|
2665
2675
|
</li>
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
</
|
|
2672
|
-
</
|
|
2676
|
+
<kendo-resize-sensor
|
|
2677
|
+
*ngIf="!virtual"
|
|
2678
|
+
(resize)="listResize.emit()"
|
|
2679
|
+
>
|
|
2680
|
+
</kendo-resize-sensor>
|
|
2681
|
+
</ul>
|
|
2682
|
+
</ng-container>
|
|
2673
2683
|
<div *ngIf="virtual" #virtualContainer class="k-height-container" role="presentation">
|
|
2674
2684
|
<div [style.height.px]="scrollHeight">
|
|
2675
2685
|
<kendo-resize-sensor (resize)="listResize.emit()"></kendo-resize-sensor>
|
|
@@ -2750,10 +2760,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
2750
2760
|
args: ['content', { static: true }]
|
|
2751
2761
|
}], list: [{
|
|
2752
2762
|
type: ViewChild,
|
|
2753
|
-
args: ['list'
|
|
2763
|
+
args: ['list']
|
|
2754
2764
|
}], virtualContainer: [{
|
|
2755
2765
|
type: ViewChild,
|
|
2756
|
-
args: ['virtualContainer'
|
|
2766
|
+
args: ['virtualContainer']
|
|
2757
2767
|
}] } });
|
|
2758
2768
|
|
|
2759
2769
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-dropdowns",
|
|
3
|
-
"version": "21.0.0-develop.
|
|
3
|
+
"version": "21.0.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",
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
"package": {
|
|
101
101
|
"productName": "Kendo UI for Angular",
|
|
102
102
|
"productCode": "KENDOUIANGULAR",
|
|
103
|
-
"publishDate":
|
|
103
|
+
"publishDate": 1761814587,
|
|
104
104
|
"licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
|
|
105
105
|
}
|
|
106
106
|
},
|
|
@@ -111,18 +111,18 @@
|
|
|
111
111
|
"@angular/forms": "18 - 20",
|
|
112
112
|
"@angular/platform-browser": "18 - 20",
|
|
113
113
|
"@progress/kendo-licensing": "^1.7.0",
|
|
114
|
-
"@progress/kendo-angular-common": "21.0.0-develop.
|
|
115
|
-
"@progress/kendo-angular-utils": "21.0.0-develop.
|
|
116
|
-
"@progress/kendo-angular-l10n": "21.0.0-develop.
|
|
117
|
-
"@progress/kendo-angular-navigation": "21.0.0-develop.
|
|
118
|
-
"@progress/kendo-angular-popup": "21.0.0-develop.
|
|
119
|
-
"@progress/kendo-angular-icons": "21.0.0-develop.
|
|
120
|
-
"@progress/kendo-angular-treeview": "21.0.0-develop.
|
|
114
|
+
"@progress/kendo-angular-common": "21.0.0-develop.5",
|
|
115
|
+
"@progress/kendo-angular-utils": "21.0.0-develop.5",
|
|
116
|
+
"@progress/kendo-angular-l10n": "21.0.0-develop.5",
|
|
117
|
+
"@progress/kendo-angular-navigation": "21.0.0-develop.5",
|
|
118
|
+
"@progress/kendo-angular-popup": "21.0.0-develop.5",
|
|
119
|
+
"@progress/kendo-angular-icons": "21.0.0-develop.5",
|
|
120
|
+
"@progress/kendo-angular-treeview": "21.0.0-develop.5",
|
|
121
121
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
122
122
|
},
|
|
123
123
|
"dependencies": {
|
|
124
124
|
"tslib": "^2.3.1",
|
|
125
|
-
"@progress/kendo-angular-schematics": "21.0.0-develop.
|
|
125
|
+
"@progress/kendo-angular-schematics": "21.0.0-develop.5",
|
|
126
126
|
"@progress/kendo-common": "^1.0.1",
|
|
127
127
|
"node-html-parser": "^7.0.1"
|
|
128
128
|
},
|
|
@@ -5,9 +5,9 @@ const schematics_1 = require("@angular-devkit/schematics");
|
|
|
5
5
|
function default_1(options) {
|
|
6
6
|
const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'DropDownsModule', package: 'dropdowns', peerDependencies: {
|
|
7
7
|
// peers of the treeview
|
|
8
|
-
'@progress/kendo-angular-inputs': '21.0.0-develop.
|
|
8
|
+
'@progress/kendo-angular-inputs': '21.0.0-develop.5',
|
|
9
9
|
// peers of inputs
|
|
10
|
-
'@progress/kendo-angular-intl': '21.0.0-develop.
|
|
10
|
+
'@progress/kendo-angular-intl': '21.0.0-develop.5',
|
|
11
11
|
'@progress/kendo-drawing': '^1.17.2',
|
|
12
12
|
// Peer dependency of icons
|
|
13
13
|
'@progress/kendo-svg-icons': '^4.0.0'
|