@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.
- package/fesm2022/progress-kendo-angular-listview.mjs +52 -52
- package/package.json +13 -21
- package/schematics/ngAdd/index.js +6 -6
- package/esm2022/data-binding/data-binding.directive.mjs +0 -86
- package/esm2022/directives.mjs +0 -33
- package/esm2022/editing/commands/add-command.directive.mjs +0 -90
- package/esm2022/editing/commands/cancel-command.directive.mjs +0 -107
- package/esm2022/editing/commands/edit-command.directive.mjs +0 -94
- package/esm2022/editing/commands/remove-command.directive.mjs +0 -94
- package/esm2022/editing/commands/save-command.directive.mjs +0 -107
- package/esm2022/editing/edit-template.directive.mjs +0 -53
- package/esm2022/editing/edit.service.mjs +0 -119
- package/esm2022/editing/events/add-event-args.interface.mjs +0 -5
- package/esm2022/editing/events/cancel-event-args.interface.mjs +0 -5
- package/esm2022/editing/events/edit-event-args.interface.mjs +0 -5
- package/esm2022/editing/events/remove-event-args.interface.mjs +0 -5
- package/esm2022/editing/events/save-event-args.interface.mjs +0 -5
- package/esm2022/index.mjs +0 -19
- package/esm2022/listview.component.mjs +0 -880
- package/esm2022/listview.module.mjs +0 -64
- package/esm2022/models/listview-data-result.mjs +0 -5
- package/esm2022/models/page-change-event.mjs +0 -5
- package/esm2022/models/page-size-change-event.mjs +0 -11
- package/esm2022/models/page-size-item.mjs +0 -5
- package/esm2022/models/pager-position.mjs +0 -5
- package/esm2022/models/pager-settings.mjs +0 -5
- package/esm2022/models/pager-type.mjs +0 -5
- package/esm2022/models/scroll-bottom-event.mjs +0 -5
- package/esm2022/navigation/listview-navigable-item.directive.mjs +0 -76
- package/esm2022/navigation/navigation.service.mjs +0 -159
- package/esm2022/package-metadata.mjs +0 -16
- package/esm2022/progress-kendo-angular-listview.mjs +0 -8
- package/esm2022/templates/footer-template.directive.mjs +0 -42
- package/esm2022/templates/header-template.directive.mjs +0 -43
- package/esm2022/templates/item-template.directive.mjs +0 -49
- package/esm2022/templates/loader-template.directive.mjs +0 -43
- 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`—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`—The current item index. When inside a new item, `itemIndex` is `-1`.
|
|
15
|
-
* - `dataItem`—The current data item.
|
|
16
|
-
* - `isNew`—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';
|