@progress/kendo-angular-listview 21.4.1 → 22.0.0-develop.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/fesm2022/progress-kendo-angular-listview.mjs +52 -52
  2. package/package.json +13 -21
  3. package/schematics/ngAdd/index.js +6 -6
  4. package/esm2022/data-binding/data-binding.directive.mjs +0 -86
  5. package/esm2022/directives.mjs +0 -33
  6. package/esm2022/editing/commands/add-command.directive.mjs +0 -90
  7. package/esm2022/editing/commands/cancel-command.directive.mjs +0 -107
  8. package/esm2022/editing/commands/edit-command.directive.mjs +0 -94
  9. package/esm2022/editing/commands/remove-command.directive.mjs +0 -94
  10. package/esm2022/editing/commands/save-command.directive.mjs +0 -107
  11. package/esm2022/editing/edit-template.directive.mjs +0 -53
  12. package/esm2022/editing/edit.service.mjs +0 -119
  13. package/esm2022/editing/events/add-event-args.interface.mjs +0 -5
  14. package/esm2022/editing/events/cancel-event-args.interface.mjs +0 -5
  15. package/esm2022/editing/events/edit-event-args.interface.mjs +0 -5
  16. package/esm2022/editing/events/remove-event-args.interface.mjs +0 -5
  17. package/esm2022/editing/events/save-event-args.interface.mjs +0 -5
  18. package/esm2022/index.mjs +0 -19
  19. package/esm2022/listview.component.mjs +0 -880
  20. package/esm2022/listview.module.mjs +0 -64
  21. package/esm2022/models/listview-data-result.mjs +0 -5
  22. package/esm2022/models/page-change-event.mjs +0 -5
  23. package/esm2022/models/page-size-change-event.mjs +0 -11
  24. package/esm2022/models/page-size-item.mjs +0 -5
  25. package/esm2022/models/pager-position.mjs +0 -5
  26. package/esm2022/models/pager-settings.mjs +0 -5
  27. package/esm2022/models/pager-type.mjs +0 -5
  28. package/esm2022/models/scroll-bottom-event.mjs +0 -5
  29. package/esm2022/navigation/listview-navigable-item.directive.mjs +0 -76
  30. package/esm2022/navigation/navigation.service.mjs +0 -159
  31. package/esm2022/package-metadata.mjs +0 -16
  32. package/esm2022/progress-kendo-angular-listview.mjs +0 -8
  33. package/esm2022/templates/footer-template.directive.mjs +0 -42
  34. package/esm2022/templates/header-template.directive.mjs +0 -43
  35. package/esm2022/templates/item-template.directive.mjs +0 -49
  36. package/esm2022/templates/loader-template.directive.mjs +0 -43
  37. package/esm2022/utils.mjs +0 -103
@@ -1,107 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Component, HostListener, ElementRef, Renderer2 as Renderer, NgZone } from '@angular/core';
6
- import { Button } from '@progress/kendo-angular-buttons';
7
- import { LocalizationService } from '@progress/kendo-angular-l10n';
8
- import { EditService } from '../edit.service';
9
- import { getClosestListItemIndex } from '../../utils';
10
- import { NgClass } from '@angular/common';
11
- import { IconWrapperComponent } from '@progress/kendo-angular-icons';
12
- import * as i0 from "@angular/core";
13
- import * as i1 from "../edit.service";
14
- import * as i2 from "@progress/kendo-angular-l10n";
15
- /**
16
- * Represents the cancel command button directive of the Kendo UI ListView for Angular.
17
- * Provides the `cancel` command of the ListView. You can apply this directive to any `button`
18
- * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
19
- * When you click an associated button with the directive, the
20
- * [`cancel`]({% slug api_listview_listviewcomponent %}#toc-cancel) event
21
- * triggers ([see example]({% slug editing_listview %})).
22
- *
23
- * @example
24
- * ```html
25
- * <kendo-listview>
26
- * <ng-template kendoListViewEditTemplate>
27
- * <button kendoListViewCancelCommand>Cancel changes</button>
28
- * </ng-template>
29
- * </kendo-listview>
30
- * ```
31
- *
32
- * You can control the content of the button based on the state of the item.
33
- *
34
- * @example
35
- * ```html
36
- * <kendo-listview>
37
- * <ng-template kendoListViewEditTemplate let-isNew="isNew">
38
- * <button kendoListViewCancelCommand>{{isNew ? 'Discard' : 'Cancel changes'}}</button>
39
- * </ng-template>
40
- * </kendo-listview>
41
- * ```
42
- */
43
- export class CancelCommandDirective extends Button {
44
- editService;
45
- elementRef;
46
- /**
47
- * @hidden
48
- */
49
- clickHandler(e) {
50
- e.preventDefault();
51
- const index = getClosestListItemIndex(this.elementRef.nativeElement);
52
- if (this.editService.isEdited(index)) {
53
- this.editService.endEdit(index);
54
- }
55
- }
56
- constructor(editService, element, renderer, localization, ngZone) {
57
- super(element, renderer, null, localization, ngZone);
58
- this.editService = editService;
59
- this.elementRef = element;
60
- }
61
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CancelCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
62
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CancelCommandDirective, isStandalone: true, selector: "[kendoListViewCancelCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
63
- @if (icon || svgIcon) {
64
- <kendo-icon-wrapper
65
- innerCssClass="k-button-icon"
66
- [name]="icon"
67
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
68
- }
69
- @if (imageUrl) {
70
- <span class="k-button-icon k-icon">
71
- <img [src]="imageUrl" class="k-image" role="presentation" />
72
- </span>
73
- }
74
- @if (iconClass) {
75
- <span class="k-button-icon" [ngClass]="iconClass"></span>
76
- }
77
- <span class="k-button-text"><ng-content></ng-content></span>
78
- `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
79
- }
80
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CancelCommandDirective, decorators: [{
81
- type: Component,
82
- args: [{
83
- selector: '[kendoListViewCancelCommand]',
84
- template: `
85
- @if (icon || svgIcon) {
86
- <kendo-icon-wrapper
87
- innerCssClass="k-button-icon"
88
- [name]="icon"
89
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
90
- }
91
- @if (imageUrl) {
92
- <span class="k-button-icon k-icon">
93
- <img [src]="imageUrl" class="k-image" role="presentation" />
94
- </span>
95
- }
96
- @if (iconClass) {
97
- <span class="k-button-icon" [ngClass]="iconClass"></span>
98
- }
99
- <span class="k-button-text"><ng-content></ng-content></span>
100
- `,
101
- standalone: true,
102
- imports: [IconWrapperComponent, NgClass]
103
- }]
104
- }], ctorParameters: () => [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }], propDecorators: { clickHandler: [{
105
- type: HostListener,
106
- args: ['click', ['$event']]
107
- }] } });
@@ -1,94 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Component, HostListener, ElementRef, Renderer2 as Renderer, NgZone } from '@angular/core';
6
- import { Button } from '@progress/kendo-angular-buttons';
7
- import { LocalizationService } from '@progress/kendo-angular-l10n';
8
- import { EditService } from '../edit.service';
9
- import { getClosestListItemIndex } from '../../utils';
10
- import { NgClass } from '@angular/common';
11
- import { IconWrapperComponent } from '@progress/kendo-angular-icons';
12
- import * as i0 from "@angular/core";
13
- import * as i1 from "../edit.service";
14
- import * as i2 from "@progress/kendo-angular-l10n";
15
- /**
16
- * Represents the edit command button directive of the Kendo UI ListView for Angular.
17
- * Provides the `edit` command of the ListView. You can apply this directive to any `button`
18
- * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
19
- * When you click an associated button with the directive, the
20
- * [`edit`]({% slug api_listview_listviewcomponent %}#toc-edit) event
21
- * triggers ([see example]({% slug editing_listview %})).
22
- *
23
- * @example
24
- * ```html
25
- * <kendo-listview>
26
- * <ng-template kendoListViewEditTemplate>
27
- * <button kendoListViewEditCommand class="k-primary">Edit</button>
28
- * </ng-template>
29
- * </kendo-listview>
30
- * ```
31
- */
32
- export class EditCommandDirective extends Button {
33
- editService;
34
- elementRef;
35
- /**
36
- * @hidden
37
- */
38
- clickHandler(e) {
39
- e.preventDefault();
40
- const index = getClosestListItemIndex(this.elementRef.nativeElement);
41
- this.editService.beginEdit(index);
42
- }
43
- constructor(editService, element, renderer, localization, ngZone) {
44
- super(element, renderer, null, localization, ngZone);
45
- this.editService = editService;
46
- this.elementRef = element;
47
- }
48
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
49
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EditCommandDirective, isStandalone: true, selector: "[kendoListViewEditCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
50
- @if (icon || svgIcon) {
51
- <kendo-icon-wrapper
52
- innerCssClass="k-button-icon"
53
- [name]="icon"
54
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
55
- }
56
- @if (imageUrl) {
57
- <span class="k-button-icon k-icon">
58
- <img [src]="imageUrl" class="k-image" role="presentation" />
59
- </span>
60
- }
61
- @if (iconClass) {
62
- <span class="k-button-icon" [ngClass]="iconClass"></span>
63
- }
64
- <span class="k-button-text"><ng-content></ng-content></span>
65
- `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
66
- }
67
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditCommandDirective, decorators: [{
68
- type: Component,
69
- args: [{
70
- selector: '[kendoListViewEditCommand]',
71
- template: `
72
- @if (icon || svgIcon) {
73
- <kendo-icon-wrapper
74
- innerCssClass="k-button-icon"
75
- [name]="icon"
76
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
77
- }
78
- @if (imageUrl) {
79
- <span class="k-button-icon k-icon">
80
- <img [src]="imageUrl" class="k-image" role="presentation" />
81
- </span>
82
- }
83
- @if (iconClass) {
84
- <span class="k-button-icon" [ngClass]="iconClass"></span>
85
- }
86
- <span class="k-button-text"><ng-content></ng-content></span>
87
- `,
88
- standalone: true,
89
- imports: [IconWrapperComponent, NgClass]
90
- }]
91
- }], ctorParameters: () => [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }], propDecorators: { clickHandler: [{
92
- type: HostListener,
93
- args: ['click', ['$event']]
94
- }] } });
@@ -1,94 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Component, HostListener, ElementRef, Renderer2 as Renderer, NgZone } from '@angular/core';
6
- import { Button } from '@progress/kendo-angular-buttons';
7
- import { LocalizationService } from '@progress/kendo-angular-l10n';
8
- import { EditService } from '../edit.service';
9
- import { getClosestListItemIndex } from '../../utils';
10
- import { NgClass } from '@angular/common';
11
- import { IconWrapperComponent } from '@progress/kendo-angular-icons';
12
- import * as i0 from "@angular/core";
13
- import * as i1 from "../edit.service";
14
- import * as i2 from "@progress/kendo-angular-l10n";
15
- /**
16
- * Represents the remove command button directive of the Kendo UI ListView for Angular.
17
- * Provides the `remove` command of the ListView. You can apply this directive to any `button` element
18
- * inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
19
- * When you click an associated button with the directive, the
20
- * [`remove`]({% slug api_listview_listviewcomponent %}#toc-remove) event
21
- * triggers ([see example]({% slug editing_listview %})).
22
- *
23
- * @example
24
- * ```html
25
- * <kendo-listview>
26
- * <ng-template kendoListViewEditTemplate>
27
- * <button kendoListViewRemoveCommand>Remove item</button>
28
- * </ng-template>
29
- * </kendo-listview>
30
- * ```
31
- */
32
- export class RemoveCommandDirective extends Button {
33
- editService;
34
- elementRef;
35
- /**
36
- * @hidden
37
- */
38
- clickHandler(e) {
39
- e.preventDefault();
40
- const index = getClosestListItemIndex(this.elementRef.nativeElement);
41
- this.editService.remove(index);
42
- }
43
- constructor(editService, element, renderer, localization, ngZone) {
44
- super(element, renderer, null, localization, ngZone);
45
- this.editService = editService;
46
- this.elementRef = element;
47
- }
48
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RemoveCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
49
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RemoveCommandDirective, isStandalone: true, selector: "[kendoListViewRemoveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
50
- @if (icon || svgIcon) {
51
- <kendo-icon-wrapper
52
- innerCssClass="k-button-icon"
53
- [name]="icon"
54
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
55
- }
56
- @if (imageUrl) {
57
- <span class="k-button-icon k-icon">
58
- <img [src]="imageUrl" class="k-image" role="presentation" />
59
- </span>
60
- }
61
- @if (iconClass) {
62
- <span class="k-button-icon" [ngClass]="iconClass"></span>
63
- }
64
- <span class="k-button-text"><ng-content></ng-content></span>
65
- `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
66
- }
67
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RemoveCommandDirective, decorators: [{
68
- type: Component,
69
- args: [{
70
- selector: '[kendoListViewRemoveCommand]',
71
- template: `
72
- @if (icon || svgIcon) {
73
- <kendo-icon-wrapper
74
- innerCssClass="k-button-icon"
75
- [name]="icon"
76
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
77
- }
78
- @if (imageUrl) {
79
- <span class="k-button-icon k-icon">
80
- <img [src]="imageUrl" class="k-image" role="presentation" />
81
- </span>
82
- }
83
- @if (iconClass) {
84
- <span class="k-button-icon" [ngClass]="iconClass"></span>
85
- }
86
- <span class="k-button-text"><ng-content></ng-content></span>
87
- `,
88
- standalone: true,
89
- imports: [IconWrapperComponent, NgClass]
90
- }]
91
- }], ctorParameters: () => [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }], propDecorators: { clickHandler: [{
92
- type: HostListener,
93
- args: ['click', ['$event']]
94
- }] } });
@@ -1,107 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Component, HostListener, ElementRef, Renderer2 as Renderer, NgZone } from '@angular/core';
6
- import { Button } from '@progress/kendo-angular-buttons';
7
- import { LocalizationService } from '@progress/kendo-angular-l10n';
8
- import { EditService } from '../edit.service';
9
- import { getClosestListItemIndex } from '../../utils';
10
- import { NgClass } from '@angular/common';
11
- import { IconWrapperComponent } from '@progress/kendo-angular-icons';
12
- import * as i0 from "@angular/core";
13
- import * as i1 from "../edit.service";
14
- import * as i2 from "@progress/kendo-angular-l10n";
15
- /**
16
- * Represents the save command button directive of the Kendo UI ListView for Angular.
17
- * Provides the `save` command of the ListView. You can apply this directive to any `button`
18
- * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
19
- * When you click an associated button with the directive, the
20
- * [`save`]({% slug api_listview_listviewcomponent %}#toc-save) event
21
- * triggers ([see example]({% slug editing_listview %})).
22
- *
23
- * @example
24
- * ```html
25
- * <kendo-listview>
26
- * <ng-template kendoListViewEditTemplate>
27
- * <button kendoListViewSaveCommand>Save changes</button>
28
- * </ng-template>
29
- * </kendo-listview>
30
- * ```
31
- *
32
- * You can control the content of the button based on the state of the item.
33
- *
34
- * @example
35
- * ```html
36
- * <kendo-listview>
37
- * <ng-template kendoListViewEditTemplate let-isNew="isNew">
38
- * <button kendoListViewSaveCommand>{{isNew ? 'Add' : 'Update'}}</button>
39
- * </ng-template>
40
- * </kendo-listview>
41
- * ```
42
- */
43
- export class SaveCommandDirective extends Button {
44
- editService;
45
- elementRef;
46
- /**
47
- * @hidden
48
- */
49
- clickHandler(e) {
50
- e.preventDefault();
51
- const index = getClosestListItemIndex(this.elementRef.nativeElement);
52
- if (this.editService.isEdited(index)) {
53
- this.editService.save(index);
54
- }
55
- }
56
- constructor(editService, element, renderer, localization, ngZone) {
57
- super(element, renderer, null, localization, ngZone);
58
- this.editService = editService;
59
- this.elementRef = element;
60
- }
61
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SaveCommandDirective, deps: [{ token: i1.EditService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
62
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SaveCommandDirective, isStandalone: true, selector: "[kendoListViewSaveCommand]", host: { listeners: { "click": "clickHandler($event)" } }, usesInheritance: true, ngImport: i0, template: `
63
- @if (icon || svgIcon) {
64
- <kendo-icon-wrapper
65
- innerCssClass="k-button-icon"
66
- [name]="icon"
67
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
68
- }
69
- @if (imageUrl) {
70
- <span class="k-button-icon k-icon">
71
- <img [src]="imageUrl" class="k-image" role="presentation" />
72
- </span>
73
- }
74
- @if (iconClass) {
75
- <span class="k-button-icon" [ngClass]="iconClass"></span>
76
- }
77
- <span class="k-button-text"><ng-content></ng-content></span>
78
- `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
79
- }
80
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SaveCommandDirective, decorators: [{
81
- type: Component,
82
- args: [{
83
- selector: '[kendoListViewSaveCommand]',
84
- template: `
85
- @if (icon || svgIcon) {
86
- <kendo-icon-wrapper
87
- innerCssClass="k-button-icon"
88
- [name]="icon"
89
- [svgIcon]="svgIcon"></kendo-icon-wrapper>
90
- }
91
- @if (imageUrl) {
92
- <span class="k-button-icon k-icon">
93
- <img [src]="imageUrl" class="k-image" role="presentation" />
94
- </span>
95
- }
96
- @if (iconClass) {
97
- <span class="k-button-icon" [ngClass]="iconClass"></span>
98
- }
99
- <span class="k-button-text"><ng-content></ng-content></span>
100
- `,
101
- standalone: true,
102
- imports: [IconWrapperComponent, NgClass]
103
- }]
104
- }], ctorParameters: () => [{ type: i1.EditService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.LocalizationService }, { type: i0.NgZone }], propDecorators: { clickHandler: [{
105
- type: HostListener,
106
- args: ['click', ['$event']]
107
- }] } });
@@ -1,53 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Directive, TemplateRef, Optional } from '@angular/core';
6
- import * as i0 from "@angular/core";
7
- /**
8
- * Defines the edit template of the ListView ([see example]({% slug editing_template_forms_listview %})).
9
- * Helps you customize the content of the edited items. To define the template, nest an `<ng-template>`
10
- * tag with the `kendoListViewEditTemplate` directive inside a `<kendo-listview>` tag.
11
- *
12
- * The template context contains the following fields:
13
- * - `formGroup`&mdash;The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']). When you use the ListView inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
14
- * - `itemIndex`&mdash;The current item index. When inside a new item, `itemIndex` is `-1`.
15
- * - `dataItem`&mdash;The current data item.
16
- * - `isNew`&mdash;The state of the current item.
17
- *
18
- *
19
- * @example
20
- * ```typescript
21
- * @Component({
22
- * template: `
23
- * <kendo-listview [data]="items">
24
- * <ng-template kendoListViewEditTemplate let-dataItem let-formGroup="formGroup">
25
- * <div class="edit-form">
26
- * <input [(ngModel)]="dataItem.name" [formControl]="formGroup.get('name')" />
27
- * <button kendoListViewSaveCommand>Save</button>
28
- * <button kendoListViewCancelCommand>Cancel</button>
29
- * </div>
30
- * </ng-template>
31
- * </kendo-listview>
32
- * `
33
- * })
34
- * export class AppComponent { }
35
- * ```
36
- */
37
- export class EditTemplateDirective {
38
- templateRef;
39
- constructor(templateRef) {
40
- this.templateRef = templateRef;
41
- }
42
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
43
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: EditTemplateDirective, isStandalone: true, selector: "[kendoListViewEditTemplate]", ngImport: i0 });
44
- }
45
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditTemplateDirective, decorators: [{
46
- type: Directive,
47
- args: [{
48
- selector: '[kendoListViewEditTemplate]',
49
- standalone: true
50
- }]
51
- }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
52
- type: Optional
53
- }] }] });
@@ -1,119 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { Injectable, EventEmitter, NgZone } from '@angular/core';
6
- import { FormGroup } from '@angular/forms';
7
- import { isPresent } from '../utils';
8
- import { Subject } from 'rxjs';
9
- import { switchMap, take } from 'rxjs/operators';
10
- import * as i0 from "@angular/core";
11
- /**
12
- * @hidden
13
- */
14
- const isEqual = (index) => (item) => item.index === index;
15
- /**
16
- * @hidden
17
- */
18
- const isNotEqual = (index) => (item) => item.index !== index;
19
- /**
20
- * @hidden
21
- */
22
- const isNewItem = (index) => index === -1 || index === undefined;
23
- /**
24
- * @hidden
25
- */
26
- export class EditService {
27
- ngZone;
28
- changes = new EventEmitter();
29
- changed;
30
- editedIndices = [];
31
- newItem;
32
- changedSource = new Subject();
33
- constructor(ngZone) {
34
- this.ngZone = ngZone;
35
- this.changed = this.changedSource.asObservable().pipe(switchMap(() => this.ngZone.onStable.asObservable().pipe(take(1))));
36
- }
37
- editItem(index, group = undefined) {
38
- this.editedIndices.push({ index, group });
39
- this.onChanged();
40
- }
41
- addItem(group) {
42
- this.newItem = { group };
43
- this.onChanged();
44
- }
45
- isEditing() {
46
- return this.editedIndices.length > 0;
47
- }
48
- get hasNewItem() {
49
- return isPresent(this.newItem);
50
- }
51
- get newDataItem() {
52
- if (this.hasNewItem) {
53
- return this.newItem.group.value;
54
- }
55
- return {};
56
- }
57
- get newItemGroup() {
58
- if (this.hasNewItem) {
59
- return this.newItem.group;
60
- }
61
- return new FormGroup({});
62
- }
63
- editGroup(index) {
64
- return this.context(index).group;
65
- }
66
- close(index) {
67
- if (isNewItem(index)) {
68
- this.newItem = undefined;
69
- return;
70
- }
71
- this.editedIndices = this.editedIndices.filter(isNotEqual(index));
72
- this.onChanged();
73
- }
74
- context(index) {
75
- if (isNewItem(index)) {
76
- return this.newItem;
77
- }
78
- return this.findByIndex(index);
79
- }
80
- isEdited(index) {
81
- if (isNewItem(index) && isPresent(this.newItem)) {
82
- return true;
83
- }
84
- return isPresent(this.findByIndex(index));
85
- }
86
- hasEdited(index) {
87
- return isPresent(this.context(index));
88
- }
89
- beginEdit(itemIndex) {
90
- this.changes.emit({ action: 'edit', itemIndex });
91
- }
92
- beginAdd() {
93
- this.changes.emit({ action: 'add' });
94
- }
95
- endEdit(itemIndex) {
96
- const { group: formGroup } = this.context(itemIndex);
97
- this.changes.emit({ action: 'cancel', itemIndex, formGroup, isNew: isNewItem(itemIndex) });
98
- }
99
- save(itemIndex) {
100
- const { group: formGroup } = this.context(itemIndex);
101
- this.changes.emit({ action: 'save', itemIndex, formGroup, isNew: isNewItem(itemIndex) });
102
- }
103
- remove(itemIndex) {
104
- this.changes.emit({ action: 'remove', itemIndex });
105
- }
106
- findByIndex(index) {
107
- return this.editedIndices.find(isEqual(index));
108
- }
109
- onChanged() {
110
- this.ngZone.runOutsideAngular(() => {
111
- this.changedSource.next(undefined);
112
- });
113
- }
114
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
115
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditService });
116
- }
117
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditService, decorators: [{
118
- type: Injectable
119
- }], ctorParameters: () => [{ type: i0.NgZone }] });
@@ -1,5 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export {};
@@ -1,5 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export {};
@@ -1,5 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export {};
@@ -1,5 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export {};
@@ -1,5 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export {};
package/esm2022/index.mjs DELETED
@@ -1,19 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2026 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- export { ListViewComponent } from './listview.component';
6
- export { ItemTemplateDirective } from './templates/item-template.directive';
7
- export { HeaderTemplateDirective } from './templates/header-template.directive';
8
- export { FooterTemplateDirective } from './templates/footer-template.directive';
9
- export { LoaderTemplateDirective } from './templates/loader-template.directive';
10
- export { DataBindingDirective } from './data-binding/data-binding.directive';
11
- export { EditTemplateDirective } from './editing/edit-template.directive';
12
- export { PageSizeChangeEvent } from './models/page-size-change-event';
13
- export { EditCommandDirective } from './editing/commands/edit-command.directive';
14
- export { AddCommandDirective } from './editing/commands/add-command.directive';
15
- export { SaveCommandDirective } from './editing/commands/save-command.directive';
16
- export { CancelCommandDirective } from './editing/commands/cancel-command.directive';
17
- export { RemoveCommandDirective } from './editing/commands/remove-command.directive';
18
- export { ListViewModule } from './listview.module';
19
- export * from './directives';