@progress/kendo-angular-pager 19.1.1 → 19.1.2-develop.2

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

@@ -11,7 +11,7 @@ import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRigh
 import { isDocumentAvailable, isFocusable, Keys, EventsOutsideAngularDirective, anyChanged, isChanged, ResizeSensorComponent, isPresent, ResizeBatchService } from '@progress/kendo-angular-common';
 import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
-import { NgIf, NgFor, NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
+import { NgIf, NgFor, NgTemplateOutlet, NgStyle } from '@angular/common';
 import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { take } from 'rxjs/operators';
@@ -41,12 +41,12 @@ class PreventableEvent {
 }
 
 /**
- * Arguments for the `pageSizeChange` event. The `pageSizeChange` event fires when the page size
- * is changed from the UI. If you cancel the event, the change is prevented.
+ * Represents the arguments for the `pageSizeChange` event. The `pageSizeChange` event fires when you change the page size
+ * from the UI. If you cancel the event, the change does not occur.
  */
 class PageSizeChangeEvent extends PreventableEvent {
     /**
-     * The newly selected page size.
+     * Gets the newly selected page size.
      */
     newPageSize;
     /**
@@ -155,8 +155,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Custom component messages override default component messages
+ * Represents the Kendo UI Pager custom messages component for Angular. Use this component to override default component messages
  * ([see example]({% slug pager_globalization %}#toc-messages)).
+ *
+ * @example
+ * ```html
+ * <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
+ *   <kendo-pager-messages
+ *     previousNext="Previous/Next"
+ *     page="Page"
+ *     of="of">
+ *   </kendo-pager-messages>
+ * </kendo-pager>
+ * ```
  */
 class CustomMessagesComponent extends Messages {
     service;
@@ -512,7 +523,16 @@ class PagerNavigationService {
 }
 
 /**
- * Place the directive on custom focusable elements in the [`kendoPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
+ * Represents the Kendo UI Pager focusable directive for Angular. Apply this directive to custom focusable elements in the [`kendoPagerTemplate`]({% slug api_pager_pagertemplatedirective %}) to include them in the built-in Pager keyboard navigation.
+ *
+ * @example
+ * ```html
+ * <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
+ *   <ng-template kendoPagerTemplate>
+ *     <button kendoPagerFocusable type="button">Custom Button</button>
+ *   </ng-template>
+ * </kendo-pager>
+ * ```
  */
 class PagerFocusableDirective {
     navigationService;
@@ -563,20 +583,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // eslint-disable no-access-missing-member
 /**
- * Displays buttons for navigating to the first and to the previous page ([see example]({% slug pager_settings %})).
+ * Represents the Kendo UI Pager Previous Buttons component for Angular. Displays buttons for navigating to the first and to the previous page ([see example]({% slug pager_settings %})).
+ *
+ * @example
+ * ```html
+ * <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
+ *   <ng-template kendoPagerTemplate>
+ *     <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
+ *   </ng-template>
+ * </kendo-pager>
+ * ```
  */
 class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd) {
         super(localization, pagerContext, cd);
     }
     /**
-     * Specifies the padding of the buttons.
+     * Specifies the padding of the navigation buttons.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     size = DEFAULT_SIZE;
     /**
@@ -684,7 +709,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
+ * Represents the Kendo UI Pager Page Sizes component for Angular. Displays a drop-down list for the page size selection ([see example]({% slug pager_settings %})).
+ *
+ * @example
+ * ```html
+ * <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
+ *   <ng-template kendoPagerTemplate>
+ *     <kendo-pager-page-sizes [pageSizes]="[10, 20, 50]"></kendo-pager-page-sizes>
+ *   </ng-template>
+ * </kendo-pager>
+ * ```
  */
 class PagerPageSizesComponent extends PagerElementComponent {
     pagerContext;
@@ -704,122 +738,16 @@ class PagerPageSizesComponent extends PagerElementComponent {
         this.cd.markForCheck();
     }
     /**
-     * The page sizes collection. Can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
+     * Specifies the page sizes collection. You can include numbers and [`PageSizeItem`]({% slug api_pager_pagesizeitem %}) objects.
      *
      * @example
-     *
-     * ```ts-preview
-     * _@Component({
-     *    selector: 'my-app',
-     *    template: `
-     *        <div *ngFor="let item of pagedData" style="border: 1px solid black; padding: 10px;">
-     *            <span>{{item.ProductID}}. </span>
-     *            <span>{{item.ProductName}}</span>
-     *        </div>
-     *        <kendo-pager
-     *             [skip]="skip"
-     *             [pageSize]="pageSize"
-     *             [total]="total"
-     *             (pageChange)="onPageChange($event)">
-     *           <ng-template kendoPagerTemplate>
-     *               <kendo-pager-page-sizes [pageSizes]="pagesizes"></kendo-pager-page-sizes>
-     *           </ng-template>
-     *        </kendo-pager>
-     *    `
-     * })
-     * class AppComponent {
-     *    public data: any[] = products;
-     *    public pagedData = [];
-     *    public skip = 0;
-     *    public pageSize = 2;
-     *    public total = products.length;
-     *    public pagesizes = [{text: 'One', value: 1}, {text: 'Two', value: 2}, {text: 'All', value : 'all'}];
-     *
-     *    public ngOnInit() {
-     *        this.pageData();
-     *    }
-     *
-     *    public onPageChange(e) {
-     *        this.skip = e.skip;
-     *        this.pageSize = e.take;
-     *        this.pageData();
-     *    }
-     *
-     *    private pageData() {
-     *        this.pagedData = this.data.slice(this.skip, this.skip + this.pageSize);
-     *    }
-     * }
-     *
-     * const products = [{
-     *   'ProductID' : 1,
-     *   'ProductName' : "Chai",
-     *   'SupplierID' : 1,
-     *   'CategoryID' : 1,
-     *   'QuantityPerUnit' : "10 boxes x 20 bags",
-     *   'UnitPrice' : 18.0000,
-     *   'UnitsInStock' : 39,
-     *   'UnitsOnOrder' : 0,
-     *   'ReorderLevel' : 10,
-     *   'Discontinued' : false
-     *
-     * }, {
-     *   'ProductID' : 2,
-     *   'ProductName' : "Chang",
-     *   'SupplierID' : 1,
-     *   'CategoryID' : 1,
-     *   'QuantityPerUnit' : "24 - 12 oz bottles",
-     *   'UnitPrice' : 19.0000,
-     *   'UnitsInStock' : 17,
-     *   'UnitsOnOrder' : 40,
-     *   'ReorderLevel' : 25,
-     *   'Discontinued' : false
-     * }, {
-     *   'ProductID' : 3,
-     *   'ProductName' : "Aniseed Syrup",
-     *   'SupplierID' : 1,
-     *   'CategoryID' : 2,
-     *   'QuantityPerUnit' : "12 - 550 ml bottles",
-     *   'UnitPrice' : 10.0000,
-     *   'UnitsInStock' : 13,
-     *   'UnitsOnOrder' : 70,
-     *   'ReorderLevel' : 25,
-     *   'Discontinued' : false
-     * }, {
-     *   'ProductID' : 4,
-     *   'ProductName' : "Chef Anton\'s Cajun Seasoning",
-     *   'SupplierID' : 2,
-     *  'CategoryID' : 2,
-     *   'QuantityPerUnit' : "48 - 6 oz jars",
-     *   'UnitPrice' : 22.0000,
-     *   'UnitsInStock' : 53,
-     *   'UnitsOnOrder' : 0,
-     *   'ReorderLevel' : 0,
-     *   'Discontinued' : false
-     * }, {
-     *   'ProductID' : 5,
-     *   'ProductName' : "Chef Anton\'s Gumbo Mix",
-     *   'SupplierID' : 2,
-     *   'CategoryID' : 2,
-     *   'QuantityPerUnit' : "36 boxes",
-     *   'UnitPrice' : 21.3500,
-     *   'UnitsInStock' : 0,
-     *   'UnitsOnOrder' : 0,
-     *   'ReorderLevel' : 0,
-     *   'Discontinued' : true
-     * }, {
-     *   'ProductID' : 6,
-     *   'ProductName' : "Grandma\'s Boysenberry Spread",
-     *   'SupplierID' : 3,
-     *   'CategoryID' : 2,
-     *   'QuantityPerUnit' : "12 - 8 oz jars",
-     *   'UnitPrice' : 25.0000,
-     *   'UnitsInStock' : 120,
-     *   'UnitsOnOrder' : 0,
-     *   'ReorderLevel' : 25,
-     *   'Discontinued' : false
-     * }];
+     * ```html
+     * <kendo-pager [skip]="0" [pageSize]="10" [total]="100">
+     *   <ng-template kendoPagerTemplate>
+     *     <kendo-pager-page-sizes [pageSizes]="[5, 10, 20, { text: 'All', value: 'all' }]"></kendo-pager-page-sizes>
+     *   </ng-template>
+     * </kendo-pager>
      * ```
-     *
      */
     set pageSizes(pageSizes) {
         let normalizedItems = [];
@@ -845,17 +773,13 @@ class PagerPageSizesComponent extends PagerElementComponent {
         this._pageSizes = normalizedItems;
     }
     /**
-     * Specifies the padding of the dropdown.
+     * Specifies the padding of the DropDownList component.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     size = DEFAULT_SIZE;
     /**
-     * Toggles the adaptiveness of the internal DropDownList.
+     * Specifies the adaptive mode of the internal `DropDownList` component.
      *
      * @default 'auto'
      */
@@ -960,10 +884,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents the pager template which helps to customize the pager appearance. To define a pager
- * template, nest an `<ng-template>` tag with the `kendoPagerTemplate` directive inside `<kendo-pager>`.
+ * Represents the Kendo UI Pager template directive for Angular.
+ * Use this directive to customize the Pager appearance. To define a Pager template, nest an `<ng-template>` tag with the `kendoPagerTemplate` directive inside `<kendo-pager>`.
  *
  * The template context provides the following fields:
+ *
  * * `currentPage`&mdash;The index of the displayed page.
  * * `pageSize`&mdash;The value of the current `pageSize`.
  * * `skip`&mdash;The current skip value.
@@ -971,34 +896,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * * `totalPages`&mdash;The total number of available pages.
  *
  * @example
- * ```ts-preview
- *
- * _@Component({
- *     selector: 'my-app',
- *     template: `
- *       <kendo-pager [total]="total" [pageSize]="pageSize" [skip]="skip" (pageChange)="onPageChange($event)">
- *           <ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
- *               <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
- *               <kendo-pager-numeric-buttons [buttonCount]="10"></kendo-pager-numeric-buttons>
- *               <kendo-pager-next-buttons></kendo-pager-next-buttons>
- *               <kendo-pager-info></kendo-pager-info>
- *               Current page: {{currentPage}}
- *           </ng-template>
- *        </kendo-pager>
- *     `
- * })
- *
- * class AppComponent {
- *     public skip = 0;
- *     public pageSize = 10;
- *     public total = 100;
- *
- *     public onPageChange(e: any): void {
- *         this.skip = e.skip;
- *         this.pageSize = e.take;
- *     }
- * }
- *
+ * ```html
+ * <kendo-pager [skip]="0" [pageSize]="10" [total]="100">
+ *   <ng-template kendoPagerTemplate let-currentPage="currentPage" let-pageSize="pageSize" let-skip="skip" let-total="total" let-totalPages="totalPages">
+ *     <span>Page {{currentPage}} of {{totalPages}}</span>
+ *     <span>Items per page: {{pageSize}}</span>
+ *   </ng-template>
+ * </kendo-pager>
  * ```
  */
 class PagerTemplateDirective {
@@ -1020,7 +924,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }] }]; } });
 
 /**
- * Displays numeric buttons to enable navigation between the pages.
+ * Represents the Kendo UI Pager Numeric Buttons component for Angular. Displays numeric buttons to enable navigation between the pages.
+ *
+ * @example
+ * ```html
+ * <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
+ *   <ng-template kendoPagerTemplate>
+ *     <kendo-pager-numeric-buttons [buttonCount]="5"></kendo-pager-numeric-buttons>
+ *   </ng-template>
+ * </kendo-pager>
+ * ```
  */
 class PagerNumericButtonsComponent extends PagerElementComponent {
     pagerContext;
@@ -1028,7 +941,7 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
     selectElement;
     numbersElement;
     /**
-     * The count of the displayed buttons.
+     * Specifies the count of the displayed buttons.
      *
      * @type {number}
      * @memberOf PagerNumericButtonsComponent
@@ -1037,11 +950,7 @@ class PagerNumericButtonsComponent extends PagerElementComponent {
     /**
      * Specifies the padding of the numeric buttons.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE;
@@ -1248,7 +1157,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // eslint-disable  no-access-missing-member
 /**
- * Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
+ * Represents the Kendo UI Pager Next Buttons component for Angular. Displays buttons for navigating to the next and to the last page ([see example]({% slug pager_settings %})).
+ *
+ * @example
+ * ```html
+ * <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
+ *   <ng-template kendoPagerTemplate>
+ *     <kendo-pager-next-buttons></kendo-pager-next-buttons>
+ *   </ng-template>
+ * </kendo-pager>
+ * ```
  */
 class PagerNextButtonsComponent extends PagerElementComponent {
     /**
@@ -1262,13 +1180,9 @@ class PagerNextButtonsComponent extends PagerElementComponent {
         return this.currentPage === this.totalPages || !this.total;
     }
     /**
-     * Specifies the padding of the buttons.
+     * Specifies the padding of the navigation buttons.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     size = DEFAULT_SIZE;
     constructor(localization, pagerContext, cd) {
@@ -1365,7 +1279,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Displays an input element which allows the typing and rendering of page numbers.
+ * Represents the Kendo UI Pager Input component for Angular. Displays an input element which allows you to type and render page numbers.
+ *
+ * @example
+ * ```html
+ * <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
+ *   <ng-template kendoPagerTemplate>
+ *     <kendo-pager-input></kendo-pager-input>
+ *   </ng-template>
+ * </kendo-pager>
+ * ```
  */
 class PagerInputComponent extends PagerElementComponent {
     pagerContext;
@@ -1378,13 +1301,9 @@ class PagerInputComponent extends PagerElementComponent {
      */
     showPageText = true;
     /**
-     * Specifies the padding of the internal numeric input element.
+     * Specifies the padding of the internal `NumericTextBox` component.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     size = DEFAULT_SIZE;
     constructor(localization, pagerContext, zone, cd, renderer) {
@@ -1506,7 +1425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
      </span>
     `,
                     standalone: true,
-                    imports: [NgClass, NgIf, NumericTextBoxComponent, PagerFocusableDirective, EventsOutsideAngularDirective]
+                    imports: [NgIf, NumericTextBoxComponent, PagerFocusableDirective, EventsOutsideAngularDirective]
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { numericInput: [{
                 type: ViewChild,
@@ -1519,7 +1438,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 // eslint-disable no-access-missing-member
 /**
- * Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
+ * Represents the Kendo UI Pager Info component for Angular. Displays information about the current page and the total number of records ([see example]({% slug pager_settings %})).
+ *
+ * @example
+ * ```html
+ * <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
+ *   <ng-template kendoPagerTemplate>
+ *     <kendo-pager-info></kendo-pager-info>
+ *   </ng-template>
+ * </kendo-pager>
+ * ```
  */
 class PagerInfoComponent extends PagerElementComponent {
     /**
@@ -1585,11 +1513,39 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1749540168,
-    version: '19.1.1',
+    publishDate: 1749820512,
+    version: '19.1.2-develop.2',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
+/**
+ * Represents the Kendo UI Pager component for Angular.
+ * Enables you to split a set of data into pages, providing a flexible and intuitive UI.
+ *
+ * @example
+ * ```ts
+ * @Component({
+ *   selector: 'my-app',
+ *   template: `
+ *     <kendo-pager
+ *       [total]="total"
+ *       [skip]="skip"
+ *       [pageSize]="pageSize"
+ *       (pageChange)="onPageChange($event)">
+ *     </kendo-pager>
+ *   `
+ * })
+ * export class AppComponent {
+ *   public total = 200;
+ *   public skip = 0;
+ *   public pageSize = 10;
+ *
+ *   public onPageChange(event: PageChangeEvent) {
+ *     this.skip = event.skip;
+ *   }
+ * }
+ * ```
+ */
 class PagerComponent {
     pagerContext;
     element;
@@ -1598,6 +1554,9 @@ class PagerComponent {
     ngZone;
     cdr;
     navigationService;
+    /**
+     * Represents the collection of pager template directives.
+     */
     template;
     set numericButtons(buttons) {
         const newWidth = buttons ? buttons.nativeElement?.offsetWidth : 0;
@@ -1624,42 +1583,42 @@ class PagerComponent {
      */
     externalTemplate;
     /**
-     * Represents the total number of data items in the collection.
+     * Specifies the total number of data items in the collection.
      *
      * @default 0
      */
     total = 0;
     /**
-     * Defines the number of data items to be skipped.
+     * Specifies the number of data items to skip.
      *
      * @default 0
      */
     skip = 0;
     /**
-     * Defines the number of data items per page.
+     * Specifies the number of data items per page.
      */
     pageSize;
     /**
-     * Sets the maximum numeric buttons count before the buttons are collapsed.
+     * Specifies the maximum number of numeric buttons before the buttons are collapsed.
      *
      * @default 10
      */
     buttonCount = 10;
     /**
-     * Toggles the information about the current page and the total number of records.
+     * Determines whether to display information about the current page and the total number of records.
      *
      * @default true
      */
     info = true;
     /**
-     * Defines the type of the pager.
+     * Specifies the type of the Pager.
      *
      * @default 'numeric'
      */
     type = 'numeric';
     /**
-     * Shows a dropdown for selecting the page size.
-     * When set to `true`, the dropdown will contain the default list of options - 5, 10, 20.
+     * Displays a dropdown for selecting the page size.
+     * When set to `true`, the dropdown contains the default list of options - 5, 10, 20.
      * To customize the list of options, set `pageSizeValues` to an array of the desired values.
      * The array can contain numbers and [PageSizeItem]({% slug api_pager_pagesizeitem %}) objects.
      */
@@ -1675,13 +1634,13 @@ class PagerComponent {
         return this._pageSizeValues;
     }
     /**
-     * Toggles the **Previous** and **Next** buttons.
+     * Determines whether to display the **Previous** and **Next** buttons.
      *
      * @default true
      */
     previousNext = true;
     /**
-     * If set to `true`, the user can use dedicated shortcuts to interact with the Pager ([see example]({% slug keyboard_navigation_pager %})).
+     * Determines whether users can use dedicated shortcuts to interact with the Pager ([see example]({% slug keyboard_navigation_pager %})).
      * By default, navigation is enabled. To disable it and make the Pager content accessible in the normal tab sequence, set the property to `false`.
      * @default true
      */
@@ -1695,11 +1654,7 @@ class PagerComponent {
     /**
      * Specifies the padding of all Pager elements.
      *
-     * The possible values are:
-     * * `small`
-     * * `medium` (default)
-     * * `large`
-     * * `none`
+     * @default 'medium'
      */
     set size(size) {
         const newSize = size ? size : DEFAULT_SIZE;
@@ -1710,26 +1665,26 @@ class PagerComponent {
         return this._size;
     }
     /**
-     * Toggles the Pager responsive functionality ([see example](slug:responsive_pager)).
+     * Determines whether the Pager responsive functionality is enabled ([see example](slug:responsive_pager)).
      *
      * @default true
      */
     responsive = true;
     /**
-     * Toggles the Pager adaptiveness functionality ([see example](slug:adaptive_mode_pager)).
+     * Determines whether the Pager adaptiveness functionality is enabled ([see example](slug:adaptive_mode_pager)).
      *
      * @default 'auto'
      */
     adaptiveMode = 'auto';
     /**
-     * Fires when the current page of the Pager is changed ([see example](slug:overview_pager)).
-     * You have to handle the event yourself and page the data.
+     * Fires when the current page of the Pager changes ([see example](slug:overview_pager)).
+     * You have to handle the event and page the data.
      */
     pageChange = new EventEmitter();
     /**
-     * Fires when the page size of the Pager is changed.
-     * You have to handle the event yourself and page the data.
-     * If the event is prevented, the page size will remain unchanged ([see example]({% slug pager_events %})).
+     * Fires when the page size of the Pager changes.
+     * You have to handle the event and page the data.
+     * If the event is prevented, the page size remains unchanged ([see example]({% slug pager_events %})).
      */
     pageSizeChange = new EventEmitter();
     /**
@@ -1876,6 +1831,9 @@ class PagerComponent {
             });
         }
     }
+    /**
+     * Gets the maximum number of items displayed on the current page.
+     */
     get maxItems() {
         return Math.min(this.currentPage * this.pageSize, this.total);
     }
@@ -2515,23 +2473,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Represents the Kendo UI PagerSpacer component for Angular.
- * Used to give additional white space between the Pager inner elements,
+ * Represents the Kendo UI Pager Spacer component for Angular.
+ * Gives you additional white space between the Pager inner elements,
  * and provides a way for customizing the spacer width.
+ *
+ * @example
+ * ```html
+ * <kendo-pager [skip]="skip" [pageSize]="pageSize" [total]="total">
+ *   <ng-template kendoPagerTemplate>
+ *     <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
+ *     <kendo-pager-info></kendo-pager-info>
+ *     <kendo-pager-spacer></kendo-pager-spacer>
+ *     <kendo-pager-next-buttons></kendo-pager-next-buttons>
+ *   </ng-template>
+ * </kendo-pager>
+ * ```
  */
 class PagerSpacerComponent {
+    /**
+     * Gets the CSS class for the spacer.
+     */
     hostClass = true;
+    /**
+     * Gets the CSS class for sized spacers.
+     */
     get sizedClass() {
         return isPresent(this.width);
     }
+    /**
+     * Gets the flex-basis style for the spacer width.
+     */
     get flexBasisStyle() {
         return this.width;
     }
     /**
-     * Specifies the width of the PagerSpacer.
+     * Specifies the width of the `PagerSpacer` component.
      * Accepts the [string values of the CSS `flex-basis` property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis).
      *
-     * If not set, the PagerSpacer will take all the available space.
+     * If you do not set this property, the `PagerSpacer` takes all the available space.
      */
     width;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PagerSpacerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });