@progress/kendo-angular-listview 17.0.0-develop.8 → 17.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/README.md +26 -17
- package/data-binding/data-binding.directive.d.ts +1 -1
- package/editing/edit.service.d.ts +3 -3
- package/editing/events/cancel-event-args.interface.d.ts +1 -1
- package/{esm2020 → esm2022}/data-binding/data-binding.directive.mjs +9 -7
- package/{esm2020 → esm2022}/editing/commands/add-command.directive.mjs +9 -8
- package/{esm2020 → esm2022}/editing/commands/cancel-command.directive.mjs +11 -9
- package/{esm2020 → esm2022}/editing/commands/edit-command.directive.mjs +11 -9
- package/{esm2020 → esm2022}/editing/commands/remove-command.directive.mjs +11 -9
- package/{esm2020 → esm2022}/editing/commands/save-command.directive.mjs +11 -9
- package/{esm2020 → esm2022}/editing/edit-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/editing/edit.service.mjs +9 -6
- package/{esm2020 → esm2022}/listview.component.mjs +206 -123
- package/{esm2020 → esm2022}/listview.module.mjs +8 -8
- package/{esm2020 → esm2022}/navigation/listview-navigable-item.directive.mjs +11 -3
- package/{esm2020 → esm2022}/navigation/navigation.service.mjs +16 -18
- package/{esm2020 → esm2022}/package-metadata.mjs +2 -2
- package/{esm2020 → esm2022}/templates/footer-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/templates/header-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/templates/item-template.directive.mjs +4 -3
- package/{esm2020 → esm2022}/templates/loader-template.directive.mjs +4 -3
- package/{fesm2020 → fesm2022}/progress-kendo-angular-listview.mjs +334 -226
- package/listview.component.d.ts +1 -1
- package/models/page-change-event.d.ts +1 -1
- package/models/pager-position.d.ts +1 -1
- package/navigation/listview-navigable-item.directive.d.ts +1 -1
- package/package.json +16 -22
- package/schematics/ngAdd/index.js +7 -7
- package/fesm2015/progress-kendo-angular-listview.mjs +0 -1767
- /package/{esm2020 → esm2022}/directives.mjs +0 -0
- /package/{esm2020 → esm2022}/editing/events/add-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/editing/events/cancel-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/editing/events/edit-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/editing/events/remove-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/editing/events/save-event-args.interface.mjs +0 -0
- /package/{esm2020 → esm2022}/index.mjs +0 -0
- /package/{esm2020 → esm2022}/models/listview-data-result.mjs +0 -0
- /package/{esm2020 → esm2022}/models/page-change-event.mjs +0 -0
- /package/{esm2020 → esm2022}/models/page-size-change-event.mjs +0 -0
- /package/{esm2020 → esm2022}/models/page-size-item.mjs +0 -0
- /package/{esm2020 → esm2022}/models/pager-position.mjs +0 -0
- /package/{esm2020 → esm2022}/models/pager-settings.mjs +0 -0
- /package/{esm2020 → esm2022}/models/pager-type.mjs +0 -0
- /package/{esm2020 → esm2022}/models/scroll-bottom-event.mjs +0 -0
- /package/{esm2020 → esm2022}/progress-kendo-angular-listview.mjs +0 -0
- /package/{esm2020 → esm2022}/utils.mjs +0 -0
|
@@ -38,86 +38,97 @@ const createControl = (source) => (acc, key) => {
|
|
|
38
38
|
* Represents the Kendo UI ListView component for Angular.
|
|
39
39
|
*/
|
|
40
40
|
export class ListViewComponent {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
41
|
+
ngZone;
|
|
42
|
+
element;
|
|
43
|
+
renderer;
|
|
44
|
+
changeDetectorRef;
|
|
45
|
+
editService;
|
|
46
|
+
navigationService;
|
|
47
|
+
/**
|
|
48
|
+
* @hidden
|
|
49
|
+
*/
|
|
50
|
+
className = true;
|
|
51
|
+
/**
|
|
52
|
+
* @hidden
|
|
53
|
+
*/
|
|
54
|
+
itemTemplate;
|
|
55
|
+
/**
|
|
56
|
+
* @hidden
|
|
57
|
+
*/
|
|
58
|
+
headerTemplate;
|
|
59
|
+
/**
|
|
60
|
+
* @hidden
|
|
61
|
+
*/
|
|
62
|
+
footerTemplate;
|
|
63
|
+
/**
|
|
64
|
+
* @hidden
|
|
65
|
+
*/
|
|
66
|
+
loaderTemplate;
|
|
67
|
+
/**
|
|
68
|
+
* @hidden
|
|
69
|
+
*/
|
|
70
|
+
contentContainer;
|
|
71
|
+
/**
|
|
72
|
+
* @hidden
|
|
73
|
+
*/
|
|
74
|
+
editTemplate;
|
|
75
|
+
/**
|
|
76
|
+
* @hidden
|
|
77
|
+
*/
|
|
78
|
+
listViewItems;
|
|
79
|
+
/**
|
|
80
|
+
* Specifies if a border should be rendered around the listview element.
|
|
81
|
+
*
|
|
82
|
+
* @default false
|
|
83
|
+
*/
|
|
84
|
+
bordered = false;
|
|
85
|
+
/**
|
|
86
|
+
* The data collection that will be used to populate the ListView
|
|
87
|
+
* ([see data binding examples]({% slug paging_listview %})).
|
|
88
|
+
*/
|
|
89
|
+
data;
|
|
90
|
+
/**
|
|
91
|
+
* Specifies if the loading indicator of the ListView will be displayed
|
|
92
|
+
* ([see example]({% slug paging_listview %}#toc-remote-binding)).
|
|
93
|
+
*/
|
|
94
|
+
loading = false;
|
|
95
|
+
/**
|
|
96
|
+
* The CSS styles that will be rendered on the content container element of the ListView.
|
|
97
|
+
* Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
|
|
98
|
+
*/
|
|
99
|
+
containerStyle;
|
|
100
|
+
/**
|
|
101
|
+
* The CSS styles that will be rendered on each item element wrapper of the ListView.
|
|
102
|
+
* Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
|
|
103
|
+
*/
|
|
104
|
+
itemStyle;
|
|
105
|
+
/**
|
|
106
|
+
* The CSS class that will be rendered on the content container element of the ListView.
|
|
107
|
+
* Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
|
|
108
|
+
*/
|
|
109
|
+
containerClass;
|
|
110
|
+
/**
|
|
111
|
+
* The CSS class that will be rendered on each item element wrapper of the ListView.
|
|
112
|
+
* Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
|
|
113
|
+
*/
|
|
114
|
+
itemClass;
|
|
115
|
+
/**
|
|
116
|
+
* Specifies the content container `aria-label` attribute
|
|
117
|
+
* ([see example]({% slug accessibility_listview %}#toc-accessible-names)).
|
|
118
|
+
*/
|
|
119
|
+
containerLabel;
|
|
120
|
+
/**
|
|
121
|
+
* Specifies the content container `role` attribute
|
|
122
|
+
* ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
|
|
123
|
+
* By default, the container `role` is set to `list`.
|
|
124
|
+
*/
|
|
125
|
+
containerRole = 'list';
|
|
126
|
+
/**
|
|
127
|
+
* Specifies the list item `role` attribute
|
|
128
|
+
* ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
|
|
129
|
+
* By default, the list item `role` is set to `listitem`.
|
|
130
|
+
*/
|
|
131
|
+
listItemRole = 'listitem';
|
|
121
132
|
/**
|
|
122
133
|
* Specifies whether the keyboard navigation is enabled
|
|
123
134
|
* ([see example]({% slug keyboard_navigation_listview %})).
|
|
@@ -138,6 +149,11 @@ export class ListViewComponent {
|
|
|
138
149
|
get navigable() {
|
|
139
150
|
return this._navigable;
|
|
140
151
|
}
|
|
152
|
+
/**
|
|
153
|
+
* Defines the page size used by the ListView pager
|
|
154
|
+
* ([more details]({% slug paging_listview %})).
|
|
155
|
+
*/
|
|
156
|
+
pageSize;
|
|
141
157
|
/**
|
|
142
158
|
* Defines the number of records to be skipped by the pager
|
|
143
159
|
* ([more details]({% slug paging_listview %})).
|
|
@@ -162,6 +178,58 @@ export class ListViewComponent {
|
|
|
162
178
|
get pageable() {
|
|
163
179
|
return this._pageable;
|
|
164
180
|
}
|
|
181
|
+
/**
|
|
182
|
+
* Defines the height (in pixels) of the ListView component.
|
|
183
|
+
* If the content height exceeds the component height, a vertical scrollbar will be rendered.
|
|
184
|
+
* To set the height of the ListView, you can also use `style.height`. The `style.height`
|
|
185
|
+
* option supports units such as `px`, `%`, `em`, `rem`, and others.
|
|
186
|
+
*/
|
|
187
|
+
height;
|
|
188
|
+
/**
|
|
189
|
+
* Fires when the user scrolls to the last record on the page
|
|
190
|
+
* ([see endless scrolling example]({% slug scrollmodes_listview %}#toc-endless-scrolling)).
|
|
191
|
+
*/
|
|
192
|
+
scrollBottom = new EventEmitter();
|
|
193
|
+
/**
|
|
194
|
+
* Fires when the page or the page size of the ListView is changed
|
|
195
|
+
* ([see example]({% slug paging_listview %}#toc-remote-binding)).
|
|
196
|
+
* You have to handle the event yourself and page the data.
|
|
197
|
+
*/
|
|
198
|
+
pageChange = new EventEmitter();
|
|
199
|
+
/**
|
|
200
|
+
* Fires when the page size of the ListView is changed. This event can be prevented (`$event.preventDefault()`).
|
|
201
|
+
* If not prevented, the `pageChange` event will be fired subsequently.
|
|
202
|
+
*/
|
|
203
|
+
pageSizeChange = new EventEmitter();
|
|
204
|
+
/**
|
|
205
|
+
* Fires when the user clicks the **Edit** command button to edit an item
|
|
206
|
+
* ([see example]({% slug editing_template_forms_listview %}#toc-editing-records)).
|
|
207
|
+
*/
|
|
208
|
+
edit = new EventEmitter();
|
|
209
|
+
/**
|
|
210
|
+
* Fires when the user clicks the **Cancel** command button to close an item
|
|
211
|
+
* ([see example]({% slug editing_template_forms_listview %}#toc-cancelling-editing)).
|
|
212
|
+
*/
|
|
213
|
+
cancel = new EventEmitter();
|
|
214
|
+
/**
|
|
215
|
+
* Fires when the user clicks the **Save** command button to save changes in an item
|
|
216
|
+
* ([see example]({% slug editing_template_forms_listview %}#toc-saving-records)).
|
|
217
|
+
*/
|
|
218
|
+
save = new EventEmitter();
|
|
219
|
+
/**
|
|
220
|
+
* Fires when the user clicks the **Remove** command button to remove an item
|
|
221
|
+
* ([see example]({% slug editing_template_forms_listview %}#toc-removing-records)).
|
|
222
|
+
*/
|
|
223
|
+
remove = new EventEmitter();
|
|
224
|
+
/**
|
|
225
|
+
* Fires when the user clicks the **Add** command button to add a new item
|
|
226
|
+
* ([see example]({% slug editing_template_forms_listview %}#toc-adding-records)).
|
|
227
|
+
*/
|
|
228
|
+
add = new EventEmitter();
|
|
229
|
+
/**
|
|
230
|
+
* @hidden
|
|
231
|
+
*/
|
|
232
|
+
pagerSettings;
|
|
165
233
|
/**
|
|
166
234
|
* @hidden
|
|
167
235
|
*
|
|
@@ -205,6 +273,21 @@ export class ListViewComponent {
|
|
|
205
273
|
get activeIndex() {
|
|
206
274
|
return this.navigationService.activeIndex;
|
|
207
275
|
}
|
|
276
|
+
removeNavigationListeners;
|
|
277
|
+
_skip = 0;
|
|
278
|
+
_navigable = false;
|
|
279
|
+
_pageable;
|
|
280
|
+
editServiceSubscription;
|
|
281
|
+
constructor(ngZone, element, renderer, changeDetectorRef, editService, navigationService) {
|
|
282
|
+
this.ngZone = ngZone;
|
|
283
|
+
this.element = element;
|
|
284
|
+
this.renderer = renderer;
|
|
285
|
+
this.changeDetectorRef = changeDetectorRef;
|
|
286
|
+
this.editService = editService;
|
|
287
|
+
this.navigationService = navigationService;
|
|
288
|
+
validatePackage(packageMetadata);
|
|
289
|
+
this.attachEditHandlers();
|
|
290
|
+
}
|
|
208
291
|
ngOnChanges(changes) {
|
|
209
292
|
if (isChanged('height', changes, false)) {
|
|
210
293
|
this.renderer.setStyle(this.element.nativeElement, 'height', `${this.height}px`);
|
|
@@ -368,17 +451,16 @@ export class ListViewComponent {
|
|
|
368
451
|
});
|
|
369
452
|
this[action].emit(args);
|
|
370
453
|
}
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
}
|
|
381
|
-
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: LoaderTemplateDirective, descendants: true }, { propertyName: "editTemplate", first: true, predicate: EditTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, static: true }, { propertyName: "listViewItems", predicate: ListViewNavigableItemDirective, descendants: true }], exportAs: ["kendoListView"], usesOnChanges: true, ngImport: i0, template: `
|
|
454
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.EditService }, { token: i2.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
455
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ListViewComponent, isStandalone: true, selector: "kendo-listview", inputs: { bordered: "bordered", data: "data", loading: "loading", containerStyle: "containerStyle", itemStyle: "itemStyle", containerClass: "containerClass", itemClass: "itemClass", containerLabel: "containerLabel", containerRole: "containerRole", listItemRole: "listItemRole", navigable: "navigable", pageSize: "pageSize", skip: "skip", pageable: "pageable", height: "height" }, outputs: { scrollBottom: "scrollBottom", pageChange: "pageChange", pageSizeChange: "pageSizeChange", edit: "edit", cancel: "cancel", save: "save", remove: "remove", add: "add" }, host: { properties: { "class.k-listview": "this.className", "class.k-listview-bordered": "this.bordered" } }, providers: [
|
|
456
|
+
EditService,
|
|
457
|
+
NavigationService,
|
|
458
|
+
LocalizationService,
|
|
459
|
+
{
|
|
460
|
+
provide: L10N_PREFIX,
|
|
461
|
+
useValue: 'kendo.listview'
|
|
462
|
+
}
|
|
463
|
+
], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true }, { propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "loaderTemplate", first: true, predicate: LoaderTemplateDirective, descendants: true }, { propertyName: "editTemplate", first: true, predicate: EditTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, static: true }, { propertyName: "listViewItems", predicate: ListViewNavigableItemDirective, descendants: true }], exportAs: ["kendoListView"], usesOnChanges: true, ngImport: i0, template: `
|
|
382
464
|
<!-- top pager -->
|
|
383
465
|
<ng-template
|
|
384
466
|
*ngIf="pagerSettings?.position !== 'bottom'"
|
|
@@ -450,23 +532,23 @@ ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
450
532
|
>
|
|
451
533
|
</ng-template>
|
|
452
534
|
</div>
|
|
535
|
+
</div>
|
|
453
536
|
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
</div>
|
|
464
|
-
<ng-template
|
|
465
|
-
*ngIf="loading && loaderTemplate"
|
|
466
|
-
[ngTemplateOutlet]="loaderTemplate.templateRef"
|
|
467
|
-
>
|
|
468
|
-
</ng-template>
|
|
537
|
+
<!-- loading indicator -->
|
|
538
|
+
<div
|
|
539
|
+
*ngIf="loading && !loaderTemplate"
|
|
540
|
+
class="k-loading-mask"
|
|
541
|
+
>
|
|
542
|
+
<!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->
|
|
543
|
+
<span class="k-loading-text">Loading</span>
|
|
544
|
+
<div class="k-loading-image"></div>
|
|
545
|
+
<div class="k-loading-color"></div>
|
|
469
546
|
</div>
|
|
547
|
+
<ng-template
|
|
548
|
+
*ngIf="loading && loaderTemplate"
|
|
549
|
+
[ngTemplateOutlet]="loaderTemplate.templateRef"
|
|
550
|
+
>
|
|
551
|
+
</ng-template>
|
|
470
552
|
|
|
471
553
|
<!-- footer -->
|
|
472
554
|
<div
|
|
@@ -505,8 +587,9 @@ ListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
505
587
|
>
|
|
506
588
|
</kendo-datapager>
|
|
507
589
|
</ng-template>
|
|
508
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: ["index"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PagerComponent, selector: "kendo-datapager", inputs: ["total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
509
|
-
|
|
590
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "directive", type: ListViewNavigableItemDirective, selector: "[kendoListViewNavigableItem]", inputs: ["index"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: PagerComponent, selector: "kendo-datapager, kendo-pager", inputs: ["externalTemplate", "total", "skip", "pageSize", "buttonCount", "info", "type", "pageSizeValues", "previousNext", "navigable", "size", "responsive"], outputs: ["pageChange", "pageSizeChange"], exportAs: ["kendoDataPager", "kendoPager"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
591
|
+
}
|
|
592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
510
593
|
type: Component,
|
|
511
594
|
args: [{
|
|
512
595
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -593,23 +676,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
593
676
|
>
|
|
594
677
|
</ng-template>
|
|
595
678
|
</div>
|
|
679
|
+
</div>
|
|
596
680
|
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
</div>
|
|
607
|
-
<ng-template
|
|
608
|
-
*ngIf="loading && loaderTemplate"
|
|
609
|
-
[ngTemplateOutlet]="loaderTemplate.templateRef"
|
|
610
|
-
>
|
|
611
|
-
</ng-template>
|
|
681
|
+
<!-- loading indicator -->
|
|
682
|
+
<div
|
|
683
|
+
*ngIf="loading && !loaderTemplate"
|
|
684
|
+
class="k-loading-mask"
|
|
685
|
+
>
|
|
686
|
+
<!-- TODO: the k-loading-text is hidden with css but read by readers - review when implementing accessibility + possible localization case -->
|
|
687
|
+
<span class="k-loading-text">Loading</span>
|
|
688
|
+
<div class="k-loading-image"></div>
|
|
689
|
+
<div class="k-loading-color"></div>
|
|
612
690
|
</div>
|
|
691
|
+
<ng-template
|
|
692
|
+
*ngIf="loading && loaderTemplate"
|
|
693
|
+
[ngTemplateOutlet]="loaderTemplate.templateRef"
|
|
694
|
+
>
|
|
695
|
+
</ng-template>
|
|
613
696
|
|
|
614
697
|
<!-- footer -->
|
|
615
698
|
<div
|
|
@@ -42,15 +42,15 @@ import * as i12 from "./editing/commands/add-command.directive";
|
|
|
42
42
|
*```
|
|
43
43
|
*/
|
|
44
44
|
export class ListViewModule {
|
|
45
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
46
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ListViewModule, imports: [i1.ListViewComponent, i2.ItemTemplateDirective, i3.HeaderTemplateDirective, i4.FooterTemplateDirective, i5.LoaderTemplateDirective, i6.DataBindingDirective, i7.EditTemplateDirective, i8.EditCommandDirective, i9.CancelCommandDirective, i10.SaveCommandDirective, i11.RemoveCommandDirective, i12.AddCommandDirective], exports: [i1.ListViewComponent, i2.ItemTemplateDirective, i3.HeaderTemplateDirective, i4.FooterTemplateDirective, i5.LoaderTemplateDirective, i6.DataBindingDirective, i7.EditTemplateDirective, i8.EditCommandDirective, i9.CancelCommandDirective, i10.SaveCommandDirective, i11.RemoveCommandDirective, i12.AddCommandDirective] });
|
|
47
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewModule, providers: [
|
|
48
|
+
IconsService,
|
|
49
|
+
PopupService,
|
|
50
|
+
ResizeBatchService
|
|
51
|
+
], imports: [i1.ListViewComponent, i8.EditCommandDirective, i9.CancelCommandDirective, i10.SaveCommandDirective, i11.RemoveCommandDirective, i12.AddCommandDirective] });
|
|
45
52
|
}
|
|
46
|
-
|
|
47
|
-
ListViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, imports: [i1.ListViewComponent, i2.ItemTemplateDirective, i3.HeaderTemplateDirective, i4.FooterTemplateDirective, i5.LoaderTemplateDirective, i6.DataBindingDirective, i7.EditTemplateDirective, i8.EditCommandDirective, i9.CancelCommandDirective, i10.SaveCommandDirective, i11.RemoveCommandDirective, i12.AddCommandDirective], exports: [i1.ListViewComponent, i2.ItemTemplateDirective, i3.HeaderTemplateDirective, i4.FooterTemplateDirective, i5.LoaderTemplateDirective, i6.DataBindingDirective, i7.EditTemplateDirective, i8.EditCommandDirective, i9.CancelCommandDirective, i10.SaveCommandDirective, i11.RemoveCommandDirective, i12.AddCommandDirective] });
|
|
48
|
-
ListViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, providers: [
|
|
49
|
-
IconsService,
|
|
50
|
-
PopupService,
|
|
51
|
-
ResizeBatchService
|
|
52
|
-
], imports: [i1.ListViewComponent, i8.EditCommandDirective, i9.CancelCommandDirective, i10.SaveCommandDirective, i11.RemoveCommandDirective, i12.AddCommandDirective] });
|
|
53
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewModule, decorators: [{
|
|
53
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewModule, decorators: [{
|
|
54
54
|
type: NgModule,
|
|
55
55
|
args: [{
|
|
56
56
|
imports: [...KENDO_LISTVIEW],
|
|
@@ -11,6 +11,14 @@ import * as i1 from "./navigation.service";
|
|
|
11
11
|
* @hidden
|
|
12
12
|
*/
|
|
13
13
|
export class ListViewNavigableItemDirective {
|
|
14
|
+
hostElement;
|
|
15
|
+
renderer;
|
|
16
|
+
navigationService;
|
|
17
|
+
/**
|
|
18
|
+
* The current item index. Used to track which navigation changes apply to this item.
|
|
19
|
+
*/
|
|
20
|
+
index;
|
|
21
|
+
navigationSubscription;
|
|
14
22
|
constructor(hostElement, renderer, navigationService) {
|
|
15
23
|
this.hostElement = hostElement;
|
|
16
24
|
this.renderer = renderer;
|
|
@@ -54,10 +62,10 @@ export class ListViewNavigableItemDirective {
|
|
|
54
62
|
this.renderer.setAttribute(this.hostElement.nativeElement, 'tabindex', '-1');
|
|
55
63
|
}
|
|
56
64
|
}
|
|
65
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewNavigableItemDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
66
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ListViewNavigableItemDirective, isStandalone: true, selector: "[kendoListViewNavigableItem]", inputs: { index: "index" }, usesOnChanges: true, ngImport: i0 });
|
|
57
67
|
}
|
|
58
|
-
|
|
59
|
-
ListViewNavigableItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ListViewNavigableItemDirective, isStandalone: true, selector: "[kendoListViewNavigableItem]", inputs: { index: "index" }, usesOnChanges: true, ngImport: i0 });
|
|
60
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ListViewNavigableItemDirective, decorators: [{
|
|
68
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ListViewNavigableItemDirective, decorators: [{
|
|
61
69
|
type: Directive,
|
|
62
70
|
args: [{
|
|
63
71
|
selector: '[kendoListViewNavigableItem]',
|
|
@@ -14,21 +14,10 @@ import * as i0 from "@angular/core";
|
|
|
14
14
|
* Emits `changes` when any of the aforementioned states changes.
|
|
15
15
|
*/
|
|
16
16
|
export class NavigationService {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
this.changes = new Subject();
|
|
22
|
-
/**
|
|
23
|
-
* Specifies if a ListView item currently holds focus.
|
|
24
|
-
*/
|
|
25
|
-
this.isFocused = false;
|
|
26
|
-
/**
|
|
27
|
-
* Keeps track of the index of the items that should be the current focus target (tabindex="0").
|
|
28
|
-
* When set to `null`/`undefined`, the navigation is disabled and the items should not render a tabindex.
|
|
29
|
-
*/
|
|
30
|
-
this.activeIndex = null;
|
|
31
|
-
}
|
|
17
|
+
/**
|
|
18
|
+
* Emits every time a change in active index/focus/blur/navigation availability occurs.
|
|
19
|
+
*/
|
|
20
|
+
changes = new Subject();
|
|
32
21
|
/**
|
|
33
22
|
* Sets or gets if the navigation is enabled.
|
|
34
23
|
* When no activeIndex is present, the navigation is inferred as disabled.
|
|
@@ -46,6 +35,15 @@ export class NavigationService {
|
|
|
46
35
|
}
|
|
47
36
|
this.changes.next();
|
|
48
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* Specifies if a ListView item currently holds focus.
|
|
40
|
+
*/
|
|
41
|
+
isFocused = false;
|
|
42
|
+
/**
|
|
43
|
+
* Keeps track of the index of the items that should be the current focus target (tabindex="0").
|
|
44
|
+
* When set to `null`/`undefined`, the navigation is disabled and the items should not render a tabindex.
|
|
45
|
+
*/
|
|
46
|
+
activeIndex = null;
|
|
49
47
|
/**
|
|
50
48
|
* Shows if the checked index should be the current available focus target (tabindex="0").
|
|
51
49
|
*/
|
|
@@ -152,9 +150,9 @@ export class NavigationService {
|
|
|
152
150
|
const nextIndex = Math.min(this.activeIndex + 1, lastAvailableIndex);
|
|
153
151
|
this.navigateTo(nextIndex);
|
|
154
152
|
}
|
|
153
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
154
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
|
|
155
155
|
}
|
|
156
|
-
|
|
157
|
-
NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService });
|
|
158
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NavigationService, decorators: [{
|
|
156
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
|
|
159
157
|
type: Injectable
|
|
160
158
|
}] });
|
|
@@ -9,7 +9,7 @@ export const packageMetadata = {
|
|
|
9
9
|
name: '@progress/kendo-angular-listview',
|
|
10
10
|
productName: 'Kendo UI for Angular',
|
|
11
11
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
12
|
-
publishDate:
|
|
13
|
-
version: '17.0.0
|
|
12
|
+
publishDate: 1731414241,
|
|
13
|
+
version: '17.0.0',
|
|
14
14
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
15
15
|
};
|
|
@@ -10,13 +10,14 @@ import * as i0 from "@angular/core";
|
|
|
10
10
|
* [see example]({% slug templates_listview %}#toc-footer-template).
|
|
11
11
|
*/
|
|
12
12
|
export class FooterTemplateDirective {
|
|
13
|
+
templateRef;
|
|
13
14
|
constructor(templateRef) {
|
|
14
15
|
this.templateRef = templateRef;
|
|
15
16
|
}
|
|
17
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoListViewFooterTemplate]", ngImport: i0 });
|
|
16
19
|
}
|
|
17
|
-
|
|
18
|
-
FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoListViewFooterTemplate]", ngImport: i0 });
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FooterTemplateDirective, decorators: [{
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterTemplateDirective, decorators: [{
|
|
20
21
|
type: Directive,
|
|
21
22
|
args: [{
|
|
22
23
|
selector: '[kendoListViewFooterTemplate]',
|
|
@@ -10,13 +10,14 @@ import * as i0 from "@angular/core";
|
|
|
10
10
|
* [see example]({% slug templates_listview %}#toc-header-template).
|
|
11
11
|
*/
|
|
12
12
|
export class HeaderTemplateDirective {
|
|
13
|
+
templateRef;
|
|
13
14
|
constructor(templateRef) {
|
|
14
15
|
this.templateRef = templateRef;
|
|
15
16
|
}
|
|
17
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoListViewHeaderTemplate]", ngImport: i0 });
|
|
16
19
|
}
|
|
17
|
-
|
|
18
|
-
HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoListViewHeaderTemplate]", ngImport: i0 });
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
|
|
20
21
|
type: Directive,
|
|
21
22
|
args: [{
|
|
22
23
|
selector: '[kendoListViewHeaderTemplate]',
|
|
@@ -16,13 +16,14 @@ import * as i0 from "@angular/core";
|
|
|
16
16
|
* - `let-isLast="isLast"` (`boolean`)- Indicates whether the current data item will be rendered as the last item on the list.
|
|
17
17
|
*/
|
|
18
18
|
export class ItemTemplateDirective {
|
|
19
|
+
templateRef;
|
|
19
20
|
constructor(templateRef) {
|
|
20
21
|
this.templateRef = templateRef;
|
|
21
22
|
}
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
24
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoListViewItemTemplate]", ngImport: i0 });
|
|
22
25
|
}
|
|
23
|
-
|
|
24
|
-
ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ItemTemplateDirective, isStandalone: true, selector: "[kendoListViewItemTemplate]", ngImport: i0 });
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ItemTemplateDirective, decorators: [{
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ItemTemplateDirective, decorators: [{
|
|
26
27
|
type: Directive,
|
|
27
28
|
args: [{
|
|
28
29
|
selector: '[kendoListViewItemTemplate]',
|
|
@@ -10,13 +10,14 @@ import * as i0 from "@angular/core";
|
|
|
10
10
|
* [see example]({% slug templates_listview %}#toc-loader-template).
|
|
11
11
|
*/
|
|
12
12
|
export class LoaderTemplateDirective {
|
|
13
|
+
templateRef;
|
|
13
14
|
constructor(templateRef) {
|
|
14
15
|
this.templateRef = templateRef;
|
|
15
16
|
}
|
|
17
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
18
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LoaderTemplateDirective, isStandalone: true, selector: "[kendoListViewLoaderTemplate]", ngImport: i0 });
|
|
16
19
|
}
|
|
17
|
-
|
|
18
|
-
LoaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LoaderTemplateDirective, isStandalone: true, selector: "[kendoListViewLoaderTemplate]", ngImport: i0 });
|
|
19
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoaderTemplateDirective, decorators: [{
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoaderTemplateDirective, decorators: [{
|
|
20
21
|
type: Directive,
|
|
21
22
|
args: [{
|
|
22
23
|
selector: '[kendoListViewLoaderTemplate]',
|