@progress/kendo-angular-listview 19.1.2-develop.2 → 19.1.2-develop.4

package/data-binding/data-binding.directive.d.ts

@@ -5,13 +5,30 @@
 import { ListViewComponent } from '../listview.component';
 import * as i0 from "@angular/core";
 /**
- * A directive that encapsulates the in-memory handling of paging
+ * Encapsulates the in-memory handling of paging for the ListView component
  * ([see example]({% slug paging_listview %}#toc-binding-directive)).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-listview [kendoListViewBinding]="listItems">
+ *       <ng-template kendoListViewItemTemplate let-dataItem>
+ *         <div>{{ dataItem.name }}</div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent {
+ *   listItems = [{ name: 'Item 1' }, { name: 'Item 2' }];
+ * }
+ * ```
  */
 export declare class DataBindingDirective {
     private listView;
     /**
-     * The array of data which will be used to populate the ListView.
+     * Specifies the array of data that populates the ListView.
      */
     set data(data: any[]);
     get data(): any[];

package/editing/commands/add-command.directive.d.ts

@@ -8,14 +8,15 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { EditService } from '../edit.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the command for adding a new item to the ListView. You can apply this directive to any
+ * Represents the add command button directive of the Kendo UI ListView for Angular.
+ * Provides the command for adding a new item to the ListView. You can apply this directive to any
  * `button` element inside a [`HeaderTemplate`]({% slug api_listview_headertemplatedirective %}).
- * When an associated button with the directive is clicked, the
- * [`add`]({% slug api_listview_listviewcomponent %}#toc-add) event is triggered
+ * When you click an associated button with the directive, the
+ * [`add`]({% slug api_listview_listviewcomponent %}#toc-add) event triggers
  * ([see example]({% slug editing_listview %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *    <ng-template kendoListViewHeaderTemplate>
  *       <button kendoListViewAddCommand>Add new</button>

package/editing/commands/cancel-command.directive.d.ts

@@ -8,14 +8,15 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { EditService } from '../edit.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the `cancel` command of the ListView. You can apply this directive to any `button`
+ * Represents the cancel command button directive of the Kendo UI ListView for Angular.
+ * Provides the `cancel` command of the ListView. You can apply this directive to any `button`
  * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
+ * When you click an associated button with the directive, the
  * [`cancel`]({% slug api_listview_listviewcomponent %}#toc-cancel) event
- * is triggered ([see example]({% slug editing_listview %})).
+ * triggers ([see example]({% slug editing_listview %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate>
  *     <button kendoListViewCancelCommand>Cancel changes</button>
@@ -26,7 +27,7 @@ import * as i0 from "@angular/core";
  * You can control the content of the button based on the state of the item.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate let-isNew="isNew">
  *     <button kendoListViewCancelCommand>{{isNew ? 'Discard' : 'Cancel changes'}}</button>

package/editing/commands/edit-command.directive.d.ts

@@ -8,21 +8,21 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { EditService } from '../edit.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the `edit` command of the ListView. You can apply this directive to any `button`
+ * Represents the edit command button directive of the Kendo UI ListView for Angular.
+ * Provides the `edit` command of the ListView. You can apply this directive to any `button`
  * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
+ * When you click an associated button with the directive, the
  * [`edit`]({% slug api_listview_listviewcomponent %}#toc-edit) event
- * is triggered ([see example]({% slug editing_listview %})).
+ * triggers ([see example]({% slug editing_listview %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate>
  *     <button kendoListViewEditCommand class="k-primary">Edit</button>
  *   </ng-template>
  * </kendo-listview>
  * ```
- *
  */
 export declare class EditCommandDirective extends Button {
     private editService;

package/editing/commands/remove-command.directive.d.ts

@@ -8,14 +8,15 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { EditService } from '../edit.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the `remove` command of the ListView. You can apply this directive to any `button` element
+ * Represents the remove command button directive of the Kendo UI ListView for Angular.
+ * Provides the `remove` command of the ListView. You can apply this directive to any `button` element
  * inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
- * [`remove` event]({% slug api_listview_listviewcomponent %}#toc-remove)
- * is triggered ([see example]({% slug editing_listview %})).
+ * When you click an associated button with the directive, the
+ * [`remove`]({% slug api_listview_listviewcomponent %}#toc-remove) event
+ * triggers ([see example]({% slug editing_listview %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate>
  *     <button kendoListViewRemoveCommand>Remove item</button>

package/editing/commands/save-command.directive.d.ts

@@ -8,14 +8,15 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { EditService } from '../edit.service';
 import * as i0 from "@angular/core";
 /**
- * Represents the `save` command of the ListView. You can apply this directive to any `button`
+ * Represents the save command button directive of the Kendo UI ListView for Angular.
+ * Provides the `save` command of the ListView. You can apply this directive to any `button`
  * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
+ * When you click an associated button with the directive, the
  * [`save`]({% slug api_listview_listviewcomponent %}#toc-save) event
- * is triggered ([see example]({% slug editing_listview %})).
+ * triggers ([see example]({% slug editing_listview %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate>
  *     <button kendoListViewSaveCommand>Save changes</button>
@@ -26,7 +27,7 @@ import * as i0 from "@angular/core";
  * You can control the content of the button based on the state of the item.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate let-isNew="isNew">
  *     <button kendoListViewSaveCommand>{{isNew ? 'Add' : 'Update'}}</button>

package/editing/edit-template.directive.d.ts

@@ -5,16 +5,34 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents the edit template of the ListView ([see example]({% slug editing_template_forms_listview %})).
- * Helps to customize the content of the edited items. To define the template, nest an `<ng-template>`
+ * Defines the edit template of the ListView ([see example]({% slug editing_template_forms_listview %})).
+ * Helps you customize the content of the edited items. To define the template, nest an `<ng-template>`
  * tag with the `kendoListViewEditTemplate` directive inside a `<kendo-listview>` tag.
  *
  * The template context contains the following fields:
- * - `formGroup`&mdash;The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']).
- * If you use the ListView inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
- * - `itemIndex`&mdash;The current item index. If inside a new item, `itemIndex` is `-1`.
+ * - `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`.
+ * - `itemIndex`&mdash;The current item index. When inside a new item, `itemIndex` is `-1`.
  * - `dataItem`&mdash;The current data item.
  * - `isNew`&mdash;The state of the current item.
+ *
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items">
+ *       <ng-template kendoListViewEditTemplate let-dataItem let-formGroup="formGroup">
+ *         <div class="edit-form">
+ *           <input [(ngModel)]="dataItem.name" [formControl]="formGroup.get('name')" />
+ *           <button kendoListViewSaveCommand>Save</button>
+ *           <button kendoListViewCancelCommand>Cancel</button>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
  */
 export declare class EditTemplateDirective {
     templateRef: TemplateRef<any>;

package/editing/events/add-event-args.interface.d.ts

@@ -4,7 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import { EditEvent } from "./edit-event-args.interface";
 /**
- * Arguments for the `add` event.
+ * Defines the arguments for the `add` event.
+ *
  */
 export interface AddEvent extends EditEvent {
 }

package/editing/events/cancel-event-args.interface.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { SaveEvent } from "./save-event-args.interface";
 /**
- * Arguments for the `cancel` event.
+ * Defines the arguments for the `cancel` event.
+ *
  */
 export type CancelEvent = SaveEvent;

package/editing/events/edit-event-args.interface.d.ts

@@ -4,23 +4,24 @@
 *-------------------------------------------------------------------------------------------*/
 import { ListViewComponent } from "../../listview.component";
 /**
- * Arguments for the `edit` event.
+ * Defines the arguments for the `edit` event.
+ *
  */
 export interface EditEvent {
     /**
-     * The data item.
+     * Specifies the data item.
      */
     dataItem: any;
     /**
-     * Indicates if the data item is new or existing.
+     * Indicates whether the data item is new or existing.
      */
     isNew: boolean;
     /**
-     * The item index for the operation.
+     * Specifies the item index for the operation.
      */
     itemIndex: number;
     /**
-     * The `ListViewComponent` instance.
+     * Specifies the `ListViewComponent` instance.
      */
     sender: ListViewComponent;
 }

package/editing/events/remove-event-args.interface.d.ts

@@ -4,7 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import { EditEvent } from "./edit-event-args.interface";
 /**
- * Arguments for the `remove` event.
+ * Defines the arguments for the `remove` event.
+ *
  */
 export interface RemoveEvent extends EditEvent {
 }

package/editing/events/save-event-args.interface.d.ts

@@ -5,11 +5,12 @@
 import { EditEvent } from "./edit-event-args.interface";
 import { FormGroup } from "@angular/forms";
 /**
- * Arguments for the `save` event.
+ * Defines the arguments for the `save` event.
+ *
  */
 export interface SaveEvent extends EditEvent {
     /**
-     * The edited `formGroup` instance.
+     * Specifies the edited `FormGroup` instance.
      */
     formGroup: FormGroup;
 }

package/esm2022/data-binding/data-binding.directive.mjs

@@ -8,13 +8,30 @@ import { ListViewComponent } from '../listview.component';
 import * as i0 from "@angular/core";
 import * as i1 from "../listview.component";
 /**
- * A directive that encapsulates the in-memory handling of paging
+ * Encapsulates the in-memory handling of paging for the ListView component
  * ([see example]({% slug paging_listview %}#toc-binding-directive)).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-listview [kendoListViewBinding]="listItems">
+ *       <ng-template kendoListViewItemTemplate let-dataItem>
+ *         <div>{{ dataItem.name }}</div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent {
+ *   listItems = [{ name: 'Item 1' }, { name: 'Item 2' }];
+ * }
+ * ```
  */
 export class DataBindingDirective {
     listView;
     /**
-     * The array of data which will be used to populate the ListView.
+     * Specifies the array of data that populates the ListView.
      */
     set data(data) {
         this._data = data || [];

package/esm2022/editing/commands/add-command.directive.mjs

@@ -12,14 +12,15 @@ import * as i0 from "@angular/core";
 import * as i1 from "../edit.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 /**
- * Represents the command for adding a new item to the ListView. You can apply this directive to any
+ * Represents the add command button directive of the Kendo UI ListView for Angular.
+ * Provides the command for adding a new item to the ListView. You can apply this directive to any
  * `button` element inside a [`HeaderTemplate`]({% slug api_listview_headertemplatedirective %}).
- * When an associated button with the directive is clicked, the
- * [`add`]({% slug api_listview_listviewcomponent %}#toc-add) event is triggered
+ * When you click an associated button with the directive, the
+ * [`add`]({% slug api_listview_listviewcomponent %}#toc-add) event triggers
  * ([see example]({% slug editing_listview %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *    <ng-template kendoListViewHeaderTemplate>
  *       <button kendoListViewAddCommand>Add new</button>

package/esm2022/editing/commands/cancel-command.directive.mjs

@@ -13,14 +13,15 @@ import * as i0 from "@angular/core";
 import * as i1 from "../edit.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 /**
- * Represents the `cancel` command of the ListView. You can apply this directive to any `button`
+ * Represents the cancel command button directive of the Kendo UI ListView for Angular.
+ * Provides the `cancel` command of the ListView. You can apply this directive to any `button`
  * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
+ * When you click an associated button with the directive, the
  * [`cancel`]({% slug api_listview_listviewcomponent %}#toc-cancel) event
- * is triggered ([see example]({% slug editing_listview %})).
+ * triggers ([see example]({% slug editing_listview %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate>
  *     <button kendoListViewCancelCommand>Cancel changes</button>
@@ -31,7 +32,7 @@ import * as i2 from "@progress/kendo-angular-l10n";
  * You can control the content of the button based on the state of the item.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate let-isNew="isNew">
  *     <button kendoListViewCancelCommand>{{isNew ? 'Discard' : 'Cancel changes'}}</button>

package/esm2022/editing/commands/edit-command.directive.mjs

@@ -13,21 +13,21 @@ import * as i0 from "@angular/core";
 import * as i1 from "../edit.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 /**
- * Represents the `edit` command of the ListView. You can apply this directive to any `button`
+ * Represents the edit command button directive of the Kendo UI ListView for Angular.
+ * Provides the `edit` command of the ListView. You can apply this directive to any `button`
  * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
+ * When you click an associated button with the directive, the
  * [`edit`]({% slug api_listview_listviewcomponent %}#toc-edit) event
- * is triggered ([see example]({% slug editing_listview %})).
+ * triggers ([see example]({% slug editing_listview %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate>
  *     <button kendoListViewEditCommand class="k-primary">Edit</button>
  *   </ng-template>
  * </kendo-listview>
  * ```
- *
  */
 export class EditCommandDirective extends Button {
     editService;

package/esm2022/editing/commands/remove-command.directive.mjs

@@ -13,14 +13,15 @@ import * as i0 from "@angular/core";
 import * as i1 from "../edit.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 /**
- * Represents the `remove` command of the ListView. You can apply this directive to any `button` element
+ * Represents the remove command button directive of the Kendo UI ListView for Angular.
+ * Provides the `remove` command of the ListView. You can apply this directive to any `button` element
  * inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
- * [`remove` event]({% slug api_listview_listviewcomponent %}#toc-remove)
- * is triggered ([see example]({% slug editing_listview %})).
+ * When you click an associated button with the directive, the
+ * [`remove`]({% slug api_listview_listviewcomponent %}#toc-remove) event
+ * triggers ([see example]({% slug editing_listview %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate>
  *     <button kendoListViewRemoveCommand>Remove item</button>

package/esm2022/editing/commands/save-command.directive.mjs

@@ -13,14 +13,15 @@ import * as i0 from "@angular/core";
 import * as i1 from "../edit.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 /**
- * Represents the `save` command of the ListView. You can apply this directive to any `button`
+ * Represents the save command button directive of the Kendo UI ListView for Angular.
+ * Provides the `save` command of the ListView. You can apply this directive to any `button`
  * element inside a [`EditTemplateDirective`]({% slug api_listview_edittemplatedirective %}) template.
- * When an associated button with the directive is clicked, the
+ * When you click an associated button with the directive, the
  * [`save`]({% slug api_listview_listviewcomponent %}#toc-save) event
- * is triggered ([see example]({% slug editing_listview %})).
+ * triggers ([see example]({% slug editing_listview %})).
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate>
  *     <button kendoListViewSaveCommand>Save changes</button>
@@ -31,7 +32,7 @@ import * as i2 from "@progress/kendo-angular-l10n";
  * You can control the content of the button based on the state of the item.
  *
  * @example
- * ```html-no-run
+ * ```html
  * <kendo-listview>
  *   <ng-template kendoListViewEditTemplate let-isNew="isNew">
  *     <button kendoListViewSaveCommand>{{isNew ? 'Add' : 'Update'}}</button>

package/esm2022/editing/edit-template.directive.mjs

@@ -5,16 +5,34 @@
 import { Directive, TemplateRef, Optional } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Represents the edit template of the ListView ([see example]({% slug editing_template_forms_listview %})).
- * Helps to customize the content of the edited items. To define the template, nest an `<ng-template>`
+ * Defines the edit template of the ListView ([see example]({% slug editing_template_forms_listview %})).
+ * Helps you customize the content of the edited items. To define the template, nest an `<ng-template>`
  * tag with the `kendoListViewEditTemplate` directive inside a `<kendo-listview>` tag.
  *
  * The template context contains the following fields:
- * - `formGroup`&mdash;The current [`FormGroup`](link:site.data.urls.angular['formgroupapi']).
- * If you use the ListView inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
- * - `itemIndex`&mdash;The current item index. If inside a new item, `itemIndex` is `-1`.
+ * - `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`.
+ * - `itemIndex`&mdash;The current item index. When inside a new item, `itemIndex` is `-1`.
  * - `dataItem`&mdash;The current data item.
  * - `isNew`&mdash;The state of the current item.
+ *
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items">
+ *       <ng-template kendoListViewEditTemplate let-dataItem let-formGroup="formGroup">
+ *         <div class="edit-form">
+ *           <input [(ngModel)]="dataItem.name" [formControl]="formGroup.get('name')" />
+ *           <button kendoListViewSaveCommand>Save</button>
+ *           <button kendoListViewCancelCommand>Cancel</button>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
  */
 export class EditTemplateDirective {
     templateRef;