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

package/esm2022/listview.component.mjs

@@ -36,6 +36,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' }
+ *   ];
+ * }
+ * ```
  */
 export class ListViewComponent {
     ngZone;
@@ -83,7 +111,7 @@ export 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) {
@@ -94,28 +122,30 @@ export 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;
     /**
@@ -126,19 +156,22 @@ export 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)) {
@@ -156,7 +189,7 @@ export 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;
@@ -173,9 +206,9 @@ export 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;
@@ -185,50 +218,51 @@ export 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();
@@ -240,7 +274,7 @@ export 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)) {
@@ -252,7 +286,7 @@ export 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) {
@@ -274,7 +308,7 @@ export 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;
@@ -337,13 +371,13 @@ export 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;
@@ -353,7 +387,7 @@ export 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;
@@ -366,7 +400,7 @@ export 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.
      */
@@ -377,8 +411,7 @@ export 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);

package/esm2022/models/page-size-change-event.mjs

@@ -4,8 +4,8 @@
 *-------------------------------------------------------------------------------------------*/
 import { PageSizeChangeEvent as PagerPageSizeChangeEvent } from "@progress/kendo-angular-pager";
 /**
- * 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 %})).
  */
 export class PageSizeChangeEvent extends PagerPageSizeChangeEvent {
 }

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1749820766,
-    version: '19.1.2-develop.2',
+    publishDate: 1750157258,
+    version: '19.1.2-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/templates/footer-template.directive.mjs

@@ -5,9 +5,25 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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 { }
+ * ```
  */
 export class FooterTemplateDirective {
     templateRef;

package/esm2022/templates/header-template.directive.mjs

@@ -5,9 +5,26 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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 { }
+ * ```
  */
 export class HeaderTemplateDirective {
     templateRef;

package/esm2022/templates/item-template.directive.mjs

@@ -5,15 +5,32 @@
 import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * 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 { }
+ * ```
  */
 export class ItemTemplateDirective {
     templateRef;

package/esm2022/templates/loader-template.directive.mjs

@@ -7,7 +7,24 @@ import * as i0 from "@angular/core";
 /**
  * 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 { }
+ * ```
  */
 export class LoaderTemplateDirective {
     templateRef;