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

package/fesm2022/progress-kendo-angular-listview.mjs

@@ -25,8 +25,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1749820766,
-    version: '19.1.2-develop.2',
+    publishDate: 1750152834,
+    version: '19.1.2-develop.3',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -348,15 +348,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Renders the list item content. To define an item template, nest an `<ng-template>` tag
+ * Allows customizing the list item content. To define an item template, nest an `<ng-template>` tag
  * with the `kendoListViewItemTemplate` directive inside the `<kendo-listview>` tag
- * [see example]({% slug templates_listview %}#toc-item-template).
+ * ([see example]({% slug templates_listview %}#toc-item-template)).
  *
  * The following values are available as context variables:
- * - `let-dataItem="dataItem"` (`any`) - The current data item. Also available as implicit context variable.
- * - `let-index="index"` (`number`) - The current item index.
- * - `let-isFirst="isFirst"` (`boolean`) - Indicates whether the current data item will be rendered as the first item on the list.
- * - `let-isLast="isLast"` (`boolean`)- Indicates whether the current data item will be rendered as the last item on the list.
+ * - `let-dataItem="dataItem"` (`any`)&mdashThe current data item. Also available as implicit context variable.
+ * - `let-index="index"` (`number`)&mdashThe current item index.
+ * - `let-isFirst="isFirst"` (`boolean`)&mdashIndicates whether the current data item renders as the first item on the list.
+ * - `let-isLast="isLast"` (`boolean`)&mdashIndicates whether the current data item renders as the last item on the list.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items">
+ *       <ng-template kendoListViewItemTemplate let-dataItem let-index="index">
+ *         <div class="item-wrapper">
+ *           <h4>{{ dataItem.name }}</h4>
+ *           <p>Item #{{ index + 1 }}: {{ dataItem.description }}</p>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
  */
 class ItemTemplateDirective {
     templateRef;
@@ -375,9 +392,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Renders the header content of the ListView. To define a header template, nest an `<ng-template>` tag
+ * Allows customizing the header content of the ListView. To define a header template, nest an `<ng-template>` tag
  * with the `kendoListViewHeaderTemplate` directive inside the `<kendo-listview>` tag
- * [see example]({% slug templates_listview %}#toc-header-template).
+ * ([see example]({% slug templates_listview %}#toc-header-template)).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items">
+ *       <ng-template kendoListViewHeaderTemplate>
+ *         <div class="header-content">
+ *           <h3>Product List</h3>
+ *           <button kendoListViewAddCommand>Add New Item</button>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
  */
 class HeaderTemplateDirective {
     templateRef;
@@ -396,9 +430,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * Renders the footer content of the ListView. To define a footer template, nest an `<ng-template>` tag
+ * Allows customizing the footer content of the ListView. To define a footer template, nest an `<ng-template>` tag
  * with the `kendoListViewFooterTemplate` directive inside the `<kendo-listview>` tag
- * [see example]({% slug templates_listview %}#toc-footer-template).
+ * ([see example]({% slug templates_listview %}#toc-footer-template)).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items">
+ *       <ng-template kendoListViewFooterTemplate>
+ *         <div class="footer-content">
+ *           <p>Total items: {{ items.length }}</p>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
  */
 class FooterTemplateDirective {
     templateRef;
@@ -419,7 +469,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * Overrides the default loader content of the ListView. To define a loader template, nest an `<ng-template>` tag
  * with the `kendoListViewLoaderTemplate` directive inside the `<kendo-listview>` tag
- * [see example]({% slug templates_listview %}#toc-loader-template).
+ * ([see example]({% slug templates_listview %}#toc-loader-template)).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <kendo-listview [data]="items" [loading]="isLoading">
+ *       <ng-template kendoListViewLoaderTemplate>
+ *         <div class="custom-loader">
+ *           <kendo-loader></kendo-loader>
+ *           <p>Loading data, please wait...</p>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent { }
+ * ```
  */
 class LoaderTemplateDirective {
     templateRef;
@@ -438,16 +505,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
- * 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 { }
+ * ```
  */
 class EditTemplateDirective {
     templateRef;
@@ -591,6 +676,34 @@ const createControl = (source) => (acc, key) => {
 };
 /**
  * Represents the Kendo UI ListView component for Angular.
+ * Displays a list of data items and supports paging, editing, and custom templates
+ * ([see overview]({% slug overview_listview %})).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-listview
+ *       [data]="items"
+ *       [pageable]="true"
+ *       [pageSize]="5">
+ *       <ng-template kendoListViewItemTemplate let-dataItem>
+ *         <div class="item">
+ *           <h3>{{ dataItem.name }}</h3>
+ *           <p>{{ dataItem.description }}</p>
+ *         </div>
+ *       </ng-template>
+ *     </kendo-listview>
+ *   `
+ * })
+ * export class AppComponent {
+ *   items = [
+ *     { name: 'Item 1', description: 'First item' },
+ *     { name: 'Item 2', description: 'Second item' }
+ *   ];
+ * }
+ * ```
  */
 class ListViewComponent {
     ngZone;
@@ -638,7 +751,7 @@ class ListViewComponent {
      */
     bordered = false;
     /**
-     * The data collection that will be used to populate the ListView
+     * Specifies the data collection that populates the ListView
      * ([see data binding examples]({% slug paging_listview %})).
      */
     set data(value) {
@@ -649,28 +762,30 @@ class ListViewComponent {
         return this._data;
     }
     /**
-     * Specifies if the loading indicator of the ListView will be displayed
+     * Specifies whether the loading indicator of the ListView displays
      * ([see example]({% slug paging_listview %}#toc-remote-binding)).
+     *
+     * @default false
      */
     loading = false;
     /**
-     * The CSS styles that will be rendered on the content container element of the ListView.
-     * Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
+     * Specifies the CSS styles that render on the content container element of the ListView.
+     * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
      */
     containerStyle;
     /**
-     * The CSS styles that will be rendered on each item element wrapper of the ListView.
-     * Supports the type of values that are supported by [`ngStyle`](link:site.data.urls.angular['ngstyleapi']).
+     * Specifies the CSS styles that render on each item element wrapper of the ListView.
+     * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
      */
     itemStyle;
     /**
-     * The CSS class that will be rendered on the content container element of the ListView.
-     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     * Specifies the CSS class that renders on the content container element of the ListView.
+     * Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
      */
     containerClass;
     /**
-     * The CSS class that will be rendered on each item element wrapper of the ListView.
-     * Supports the type of values that are supported by [`ngClass`](link:site.data.urls.angular['ngclassapi']).
+     * Specifies the CSS class that renders on each item element wrapper of the ListView.
+     * Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
      */
     itemClass;
     /**
@@ -681,19 +796,22 @@ class ListViewComponent {
     /**
      * Specifies the content container `role` attribute
      * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
-     * By default, the container `role` is set to `list`.
+     *
+     * @default 'list'
      */
     containerRole = 'list';
     /**
      * Specifies the list item `role` attribute
      * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
-     * By default, the list item `role` is set to `listitem`.
+     *
+     * @default 'listitem'
      */
     listItemRole = 'listitem';
     /**
-     * Specifies whether the keyboard navigation is enabled
+     * Specifies whether keyboard navigation is enabled
      * ([see example]({% slug keyboard_navigation_listview %})).
-     * By default, the navigation is enabled.
+     *
+     * @default true
      */
     set navigable(navigable) {
         if (!navigable && isPresent(this.removeNavigationListeners)) {
@@ -711,7 +829,7 @@ class ListViewComponent {
         return this._navigable;
     }
     /**
-     * Defines the page size used by the ListView pager
+     * Specifies the page size used by the ListView pager
      * ([more details]({% slug paging_listview %})).
      */
     pageSize;
@@ -728,9 +846,9 @@ class ListViewComponent {
         return this._skip;
     }
     /**
-     * Configures whether the ListView will render a pager
+     * Configures whether the ListView renders a pager
      * ([more details]({% slug paging_listview %})).
-     * Providing a boolean value will render a pager with the default settings.
+     * When you provide a boolean value, it renders a pager with the default settings.
      */
     set pageable(pageable) {
         this._pageable = pageable;
@@ -740,50 +858,51 @@ class ListViewComponent {
         return this._pageable;
     }
     /**
-     * Defines the height (in pixels) of the ListView component.
-     * If the content height exceeds the component height, a vertical scrollbar will be rendered.
+     * Specifies the height (in pixels) of the ListView component.
+     * When the content height exceeds the component height, a vertical scrollbar renders.
+     *
      * To set the height of the ListView, you can also use `style.height`. The `style.height`
      * option supports units such as `px`, `%`, `em`, `rem`, and others.
      */
     height;
     /**
-     * Fires when the user scrolls to the last record on the page
+     * Fires when you scroll to the last record on the page
      * ([see endless scrolling example]({% slug scrollmodes_listview %}#toc-endless-scrolling)).
      */
     scrollBottom = new EventEmitter();
     /**
-     * Fires when the page or the page size of the ListView is changed
+     * Fires when you change the page or the page size of the ListView
      * ([see example]({% slug paging_listview %}#toc-remote-binding)).
      * You have to handle the event yourself and page the data.
      */
     pageChange = new EventEmitter();
     /**
-     * Fires when the page size of the ListView is changed. This event can be prevented (`$event.preventDefault()`).
-     * If not prevented, the `pageChange` event will be fired subsequently.
+     * Fires when you change the page size of the ListView. You can prevent this event (`$event.preventDefault()`).
+     * When not prevented, the `pageChange` event fires subsequently.
      */
     pageSizeChange = new EventEmitter();
     /**
-     * Fires when the user clicks the **Edit** command button to edit an item
+     * Fires when you click the **Edit** command button to edit an item
      * ([see example]({% slug editing_template_forms_listview %}#toc-editing-records)).
      */
     edit = new EventEmitter();
     /**
-     * Fires when the user clicks the **Cancel** command button to close an item
+     * Fires when you click the **Cancel** command button to close an item
      * ([see example]({% slug editing_template_forms_listview %}#toc-cancelling-editing)).
      */
     cancel = new EventEmitter();
     /**
-     * Fires when the user clicks the **Save** command button to save changes in an item
+     * Fires when you click the **Save** command button to save changes in an item
      * ([see example]({% slug editing_template_forms_listview %}#toc-saving-records)).
      */
     save = new EventEmitter();
     /**
-     * Fires when the user clicks the **Remove** command button to remove an item
+     * Fires when you click the **Remove** command button to remove an item
      * ([see example]({% slug editing_template_forms_listview %}#toc-removing-records)).
      */
     remove = new EventEmitter();
     /**
-     * Fires when the user clicks the **Add** command button to add a new item
+     * Fires when you click the **Add** command button to add a new item
      * ([see example]({% slug editing_template_forms_listview %}#toc-adding-records)).
      */
     add = new EventEmitter();
@@ -795,7 +914,7 @@ class ListViewComponent {
      * @hidden
      *
      * Gets the data items passed to the ListView.
-     * If a ListViewDataResult is passed, the data value is used. If an array is passed - it's directly used.
+     * If a `ListViewDataResult` is passed, the data value is used. If an array is passed - it's directly used.
      */
     get items() {
         if (!isPresent(this.data)) {
@@ -807,7 +926,7 @@ class ListViewComponent {
      * @hidden
      *
      * Gets the total number of records passed to the ListView.
-     * If a ListViewDataResult is passed, the total value is used. If an array is passed - its length is used.
+     * If a `ListViewDataResult` is passed, the total value is used. If an array is passed - its length is used.
      */
     get total() {
         if (!this.pageable) {
@@ -829,7 +948,7 @@ class ListViewComponent {
     /**
      * Gets the current active item index
      * ([see example]({% slug keyboard_navigation_listview %}#toc-controlling-the-focus)).
-     * Returns `null` when the keyboard navigation is disabled.
+     * Returns `null` when keyboard navigation is disabled.
      */
     get activeIndex() {
         return this.navigationService.activeIndex;
@@ -892,13 +1011,13 @@ class ListViewComponent {
     }
     /**
      * Focuses the item at the specified index ([see example]({% slug keyboard_navigation_listview %}#toc-controlling-the-focus)):
-     * - If no index is specified, the current active index will be focused.
-     * - If the passed value is below `0`, the first item receives focus.
-     * - If the passed value is above the last available index, the last item receives focus.
+     * - When you specify no index, the current active index receives focus.
+     * - When the passed value is below `0`, the first item receives focus.
+     * - When the passed value is above the last available index, the last item receives focus.
      *
-     * > The index param is based on the logical structure of the ListView and does not correspond to the data item index -
-     * > i.e. the index `0` corresponds to the first rendered list item. Paging is not taken into account.
-     * > Also, for the focusing to work, the `navigable` prop must first be set to `true`.
+     * > The `index` parameter is based on the logical structure of the ListView and does not correspond to the data item index&mdash
+     * > the index `0` corresponds to the first rendered list item. Paging is not taken into account.
+     * > Also, the `navigable` property must first be set to `true` for the method to work as expected.
      */
     focus(index) {
         const totalRenderedItems = this.listViewItems.length;
@@ -908,7 +1027,7 @@ class ListViewComponent {
      * Creates a new item editor ([see example]({% slug editing_template_forms_listview %}#toc-adding-records)).
      *
      * @param {FormGroup} group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that describes
-     * the edit form. If called with a data item, it will build the `FormGroup` from the data item fields.
+     * the edit form. When called with a data item, it builds the `FormGroup` from the data item fields.
      */
     addItem(group) {
         const isFormGroup = group instanceof FormGroup;
@@ -921,7 +1040,7 @@ class ListViewComponent {
     /**
      * Switches the specified item to edit mode ([see example]({% slug editing_template_forms_listview %}#toc-editing-records)).
      *
-     * @param index - The item index that will be switched to edit mode.
+     * @param index - The item index that switches to edit mode.
      * @param group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi'])
      * that describes the edit form.
      */
@@ -932,8 +1051,7 @@ class ListViewComponent {
     /**
      * Closes the editor for a given item ([see example]({% slug editing_template_forms_listview %}#toc-cancelling-editing)).
      *
-     * @param {number} index - The item index that will be switched out of the edit mode. If no index is provided, it is assumed
-     * that the new item editor will be closed.
+     * @param {number} index - The item index that switches out of the edit mode. When you provide no index, the editor of the new item will close.
      */
     closeItem(index) {
         this.editService.close(index);
@@ -1382,13 +1500,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * 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' }];
+ * }
+ * ```
  */
 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 || [];
@@ -1441,28 +1576,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * The arguments of the [`pageSizeChange`]({% slug api_listview_listviewcomponent %}#toc-pagesizechange) event of the ListView
- * ([more details]({% slug paging_listview %}).
+ * Defines the arguments of the [`pageSizeChange`]({% slug api_listview_listviewcomponent %}#toc-pagesizechange) event of the ListView
+ * ([more details]({% slug paging_listview %})).
  */
 class PageSizeChangeEvent extends PageSizeChangeEvent$1 {
 }
 
 /**
- * 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>
  * ```
- *
  */
 class EditCommandDirective extends Button {
     editService;
@@ -1519,14 +1654,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * 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>
@@ -1586,14 +1722,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * 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>
@@ -1604,7 +1741,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * 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>
@@ -1669,14 +1806,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * 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>
@@ -1687,7 +1825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * 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>
@@ -1752,14 +1890,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * 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>