🎹 Pager: Create d.ts

apps/demos/configs/Angular/config.js

@@ -45,6 +45,7 @@ const componentNames = [
   'multi-view',
   'nested',
   'number-box',
+  'pagination',
   'pie-chart',
   'pivot-grid-field-chooser',
   'pivot-grid',

e2e/testcafe-devextreme/helpers/widgetTypings.ts

@@ -23,7 +23,7 @@ export type WidgetName =
   | 'dxPivotGridFieldChooser'
   | 'dxDataGrid'
   | 'dxTreeList'
-  | 'dxPager'
+  | 'dxPagination'
   | 'dxRadioGroup'
   | 'dxScheduler'
   | 'dxTabs'

e2e/testcafe-devextreme/tests/pager/accessibility.ts

@@ -9,7 +9,7 @@ fixture.disablePageReloads`Pager`
   .page(url(__dirname, '../container.html'));
 
 const options: Options<any> = {
-  totalCount: [50],
+  itemCount: [50],
 
   displayMode: ['full', 'compact'],
   infoText: [undefined, 'Total {2} items. Page {0} of {1}'],
@@ -52,7 +52,7 @@ const a11yCheckConfig = {
 };
 
 const configuration: Configuration = {
-  component: 'dxPager',
+  component: 'dxPagination',
   a11yCheckConfig,
   options,
   created,

e2e/testcafe-devextreme/tests/pager/baseProperties.ts

@@ -17,10 +17,10 @@ test('Pager width and height property', async (t) => {
     .eql(null)
     .expect(pager.element.getAttribute('height'))
     .eql(null);
-}).before(async () => createWidget('dxPager', {
+}).before(async () => createWidget('dxPagination', {
   width: 270,
   height: '95px',
-  totalCount: 50,
+  itemCount: 50,
 }));
 
 test('Pager elementAttr property', async (t) => {
@@ -30,7 +30,7 @@ test('Pager elementAttr property', async (t) => {
     .eql('some description')
     .expect(pager.element.getAttribute('data-test'))
     .eql('custom data');
-}).before(async () => createWidget('dxPager', {
+}).before(async () => createWidget('dxPagination', {
   elementAttr: {
     'aria-label': 'some description',
     'data-test': 'custom data',
@@ -48,11 +48,11 @@ test('Pager hint, disabled and accessKey properties', async (t) => {
     .eql('F')
     .expect(pager.element.getAttribute('title'))
     .eql('Best Pager');
-}).before(async () => createWidget('dxPager', {
+}).before(async () => createWidget('dxPagination', {
   hint: 'Best Pager',
   disabled: true,
   accessKey: 'F',
-  totalCount: 50,
+  itemCount: 50,
 }));
 
 test('Pager tabindex and state properties', async (t) => {
@@ -80,8 +80,8 @@ test('Pager tabindex and state properties', async (t) => {
   await t
     .expect(pager.element.hasClass('dx-state-active'))
     .ok();
-}).before(async () => createWidget('dxPager', {
-  totalCount: 50,
+}).before(async () => createWidget('dxPagination', {
+  itemCount: 50,
   disabled: false,
   width: '100%',
   focusStateEnabled: true,
@@ -103,9 +103,9 @@ test('Pager focus method without focusStateEnabled', async (t) => {
   await t
     .expect(pager.getPageSize(0).element.focused)
     .ok();
-}).before(async () => createWidget('dxPager', {
+}).before(async () => createWidget('dxPagination', {
   focusStateEnabled: false,
-  totalCount: 50,
+  itemCount: 50,
 }));
 
 test('Pager focus method with focusStateEnabled', async (t) => {
@@ -121,7 +121,7 @@ test('Pager focus method with focusStateEnabled', async (t) => {
   await t
     .expect(pager.element.focused)
     .ok();
-}).before(async () => createWidget('dxPager', {
+}).before(async () => createWidget('dxPagination', {
   focusStateEnabled: true,
-  totalCount: 50,
+  itemCount: 50,
 }));

e2e/testcafe-devextreme/tests/pager/index.ts

@@ -10,8 +10,8 @@ test('Pager visibile property', async (t) => {
   await t
     .expect(pager.element.hasClass('dx-state-invisible'))
     .ok();
-}).before(async () => createWidget('dxPager', {
-  totalCount: 50,
+}).before(async () => createWidget('dxPagination', {
+  itemCount: 50,
   visible: false,
 }));
 
@@ -22,8 +22,8 @@ test('PageSize selector test', async (t) => {
     .click(pager.getPageSize(1).element)
     .expect(pager.option('pageCount'))
     .eql(13);
-}).before(async () => createWidget('dxPager', {
-  totalCount: 50,
+}).before(async () => createWidget('dxPagination', {
+  itemCount: 50,
   pageIndex: 2,
   pageSize: 8, // pageCount: 7
   allowedPageSizes: [2, 4, 8],
@@ -38,8 +38,8 @@ test('PageIndex test', async (t) => {
     .click(pager.getNavPage('5').element)
     .expect(pager.option('pageIndex'))
     .eql(5);
-}).before(async () => createWidget('dxPager', {
-  totalCount: 50,
+}).before(async () => createWidget('dxPagination', {
+  itemCount: 50,
   pageIndex: 1,
   pageSize: 5, // pageCount: 10
 }));
@@ -53,8 +53,8 @@ test('PageIndex correction test', async (t) => {
     .click(pager.getPageSize(1).element)
     .expect(pager.option('pageIndex'))
     .eql(5);
-}).before(async () => createWidget('dxPager', {
-  totalCount: 50,
+}).before(async () => createWidget('dxPagination', {
+  itemCount: 50,
   pageIndex: 10,
   pageSize: 5, // pageCount: 10
 }));

package.json

@@ -44,7 +44,7 @@
     "axe-core": "4.10.0",
     "cheerio": "1.0.0-rc.10",
     "codelyzer": "6.0.2",
-    "devextreme-internal-tools": "16.0.0-beta.4",
+    "devextreme-internal-tools": "16.0.0-beta.5",
     "http-server": "14.1.1",
     "husky": "8.0.3",
     "jest": "29.7.0",

packages/devextreme-angular/src/common/grids/index.ts

@@ -47,7 +47,6 @@ export {
     NewRowInfo,
     NewRowPosition,
     Pager,
-    PagerDisplayMode,
     PagerPageSize,
     PagingBase,
     RowDragging,

packages/devextreme-angular/src/common/index.ts

@@ -9,6 +9,7 @@ export {
     DataStructure,
     DataType,
     Direction,
+    DisplayMode,
     DragDirection,
     Draggable,
     DragHighlight,
@@ -28,6 +29,7 @@ export {
     Orientation,
     PageLoadMode,
     PageOrientation,
+    PagerBase,
     PatternRule,
     Position,
     PositionAlignment,

packages/devextreme-angular/src/index.ts

@@ -44,6 +44,7 @@ export { DxMapComponent, DxMapModule } from 'devextreme-angular/ui/map';
 export { DxMenuComponent, DxMenuModule } from 'devextreme-angular/ui/menu';
 export { DxMultiViewComponent, DxMultiViewModule } from 'devextreme-angular/ui/multi-view';
 export { DxNumberBoxComponent, DxNumberBoxModule } from 'devextreme-angular/ui/number-box';
+export { DxPaginationComponent, DxPaginationModule } from 'devextreme-angular/ui/pagination';
 export { DxPieChartComponent, DxPieChartModule } from 'devextreme-angular/ui/pie-chart';
 export { DxPivotGridComponent, DxPivotGridModule } from 'devextreme-angular/ui/pivot-grid';
 export { DxPivotGridFieldChooserComponent, DxPivotGridFieldChooserModule } from 'devextreme-angular/ui/pivot-grid-field-chooser';

packages/devextreme-angular/src/ui/all.ts

@@ -40,6 +40,7 @@ import { DxMapModule } from 'devextreme-angular/ui/map';
 import { DxMenuModule } from 'devextreme-angular/ui/menu';
 import { DxMultiViewModule } from 'devextreme-angular/ui/multi-view';
 import { DxNumberBoxModule } from 'devextreme-angular/ui/number-box';
+import { DxPaginationModule } from 'devextreme-angular/ui/pagination';
 import { DxPieChartModule } from 'devextreme-angular/ui/pie-chart';
 import { DxPivotGridModule } from 'devextreme-angular/ui/pivot-grid';
 import { DxPivotGridFieldChooserModule } from 'devextreme-angular/ui/pivot-grid-field-chooser';
@@ -124,6 +125,7 @@ import { DxTemplateModule } from 'devextreme-angular/core';
     DxMenuModule,
     DxMultiViewModule,
     DxNumberBoxModule,
+    DxPaginationModule,
     DxPieChartModule,
     DxPivotGridModule,
     DxPivotGridFieldChooserModule,
@@ -207,6 +209,7 @@ import { DxTemplateModule } from 'devextreme-angular/core';
     DxMenuModule,
     DxMultiViewModule,
     DxNumberBoxModule,
+    DxPaginationModule,
     DxPieChartModule,
     DxPivotGridModule,
     DxPivotGridFieldChooserModule,

packages/devextreme-angular/src/ui/data-grid/index.ts

@@ -25,7 +25,7 @@ export { ExplicitTypes } from 'devextreme/ui/data_grid';
 
 import { PositionConfig } from 'devextreme/animation/position';
 import { DragDirection, DragHighlight, HorizontalAlignment, Mode, ScrollbarMode, SelectAllMode, SingleMultipleOrNone, SortOrder } from 'devextreme/common';
-import { ApplyFilterMode, ColumnChooserMode, ColumnChooserSearchConfig, ColumnChooserSelectionConfig, ColumnResizeMode, DataChange, DataRenderMode, EnterKeyAction, EnterKeyDirection, GridsEditMode, GridsEditRefreshMode, GroupExpandMode, HeaderFilterSearchConfig, NewRowPosition, PagerDisplayMode, PagerPageSize, SelectionColumnDisplayMode, StartEditAction, StateStoreType, SummaryType } from 'devextreme/common/grids';
+import { ApplyFilterMode, ColumnChooserMode, ColumnChooserSearchConfig, ColumnChooserSelectionConfig, ColumnResizeMode, DataChange, DataRenderMode, EnterKeyAction, EnterKeyDirection, GridsEditMode, GridsEditRefreshMode, GroupExpandMode, HeaderFilterSearchConfig, NewRowPosition, Pager, SelectionColumnDisplayMode, StartEditAction, StateStoreType, SummaryType } from 'devextreme/common/grids';
 import { UserDefinedElement } from 'devextreme/core/element';
 import { Store } from 'devextreme/data';
 import DataSource, { Options as DataSourceOptions } from 'devextreme/data/data_source';
@@ -806,10 +806,10 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
 
      */
     @Input()
-    get pager(): { allowedPageSizes?: Mode | Array<PagerPageSize | number>, displayMode?: PagerDisplayMode, infoText?: string, label?: string, showInfo?: boolean, showNavigationButtons?: boolean, showPageSizeSelector?: boolean, visible?: Mode | boolean } {
+    get pager(): Pager {
         return this._getOption('pager');
     }
-    set pager(value: { allowedPageSizes?: Mode | Array<PagerPageSize | number>, displayMode?: PagerDisplayMode, infoText?: string, label?: string, showInfo?: boolean, showNavigationButtons?: boolean, showPageSizeSelector?: boolean, visible?: Mode | boolean }) {
+    set pager(value: Pager) {
         this._setOption('pager', value);
     }
 
@@ -1834,7 +1834,7 @@ export class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
 
      */
-    @Output() pagerChange: EventEmitter<{ allowedPageSizes?: Mode | Array<PagerPageSize | number>, displayMode?: PagerDisplayMode, infoText?: string, label?: string, showInfo?: boolean, showNavigationButtons?: boolean, showPageSizeSelector?: boolean, visible?: Mode | boolean }>;
+    @Output() pagerChange: EventEmitter<Pager>;
 
     /**
 

packages/devextreme-angular/src/ui/data-grid/nested/pager.ts

@@ -14,8 +14,8 @@ import {
 
 
 
-import { Mode } from 'devextreme/common';
-import { PagerDisplayMode, PagerPageSize } from 'devextreme/common/grids';
+import { DisplayMode, Mode } from 'devextreme/common';
+import { PagerPageSize } from 'devextreme/common/grids';
 
 import {
     NestedOptionHost,
@@ -39,10 +39,10 @@ export class DxoDataGridPagerComponent extends NestedOption implements OnDestroy
     }
 
     @Input()
-    get displayMode(): PagerDisplayMode {
+    get displayMode(): DisplayMode {
         return this._getOption('displayMode');
     }
-    set displayMode(value: PagerDisplayMode) {
+    set displayMode(value: DisplayMode) {
         this._setOption('displayMode', value);
     }
 

packages/devextreme-angular/src/ui/nested/base/index.ts

@@ -38,6 +38,7 @@ export * from './html-editor-mention-dxi';
 export * from './html-editor-table-context-menu';
 export * from './html-editor-table-resizing';
 export * from './html-editor-variables';
+export * from './pager';
 export * from './pivot-grid-data-source';
 export * from './popup-options';
 export * from './position-config';

packages/devextreme-angular/src/ui/nested/base/pager.ts

@@ -0,0 +1,70 @@
+/* tslint:disable:max-line-length */
+
+import { NestedOption } from 'devextreme-angular/core';
+import {
+    Component,
+} from '@angular/core';
+
+import { DisplayMode, Mode } from 'devextreme/common';
+import { PagerPageSize } from 'devextreme/common/grids';
+
+@Component({
+    template: ''
+})
+export abstract class DxoPager extends NestedOption {
+    get allowedPageSizes(): Mode | Array<PagerPageSize | number> {
+        return this._getOption('allowedPageSizes');
+    }
+    set allowedPageSizes(value: Mode | Array<PagerPageSize | number>) {
+        this._setOption('allowedPageSizes', value);
+    }
+
+    get displayMode(): DisplayMode {
+        return this._getOption('displayMode');
+    }
+    set displayMode(value: DisplayMode) {
+        this._setOption('displayMode', value);
+    }
+
+    get infoText(): string {
+        return this._getOption('infoText');
+    }
+    set infoText(value: string) {
+        this._setOption('infoText', value);
+    }
+
+    get label(): string {
+        return this._getOption('label');
+    }
+    set label(value: string) {
+        this._setOption('label', value);
+    }
+
+    get showInfo(): boolean {
+        return this._getOption('showInfo');
+    }
+    set showInfo(value: boolean) {
+        this._setOption('showInfo', value);
+    }
+
+    get showNavigationButtons(): boolean {
+        return this._getOption('showNavigationButtons');
+    }
+    set showNavigationButtons(value: boolean) {
+        this._setOption('showNavigationButtons', value);
+    }
+
+    get showPageSizeSelector(): boolean {
+        return this._getOption('showPageSizeSelector');
+    }
+    set showPageSizeSelector(value: boolean) {
+        this._setOption('showPageSizeSelector', value);
+    }
+
+    get visible(): Mode | boolean {
+        return this._getOption('visible');
+    }
+    set visible(value: Mode | boolean) {
+        this._setOption('visible', value);
+    }
+}