🎹 Pager: Create d.ts

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

@@ -8,10 +8,10 @@ fixture.disablePageReloads`Pager`
   .page(url(__dirname, '../container.html'));
 
 const options: Options<any> = {
-  // disabled: [true, false], //not supported
+
+  pageIndex: [2, 5, 30],
   displayMode: ['full', 'compact'],
   infoText: [undefined, 'Total {2} items. Page {0} of {1}'],
-  pageCount: [10, 100],
   pageSizes: [[1, 2, 3], [3, 6, 9]],
   showInfo: [true, false],
   showNavigationButtons: [true, false],
@@ -53,7 +53,7 @@ const created = async (t: TestController, optionConfiguration): Promise<void> =>
 };
 
 const a11yCheckConfig = {
-  // NOTE: color-contrast issues
+  // NOTE:  color-contrast issues
   rules: { 'color-contrast': { enabled: false } },
 };
 

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

@@ -20,7 +20,7 @@ test('Pager width and height property', async (t) => {
 }).before(async () => createWidget('dxPager', {
   width: 270,
   height: '95px',
-  totalCount: 50,
+  itemCount: 50,
 }));
 
 test('Pager elementAttr property', async (t) => {
@@ -52,7 +52,7 @@ test('Pager hint, disabled and accessKey properties', async (t) => {
   hint: 'Best Pager',
   disabled: true,
   accessKey: 'F',
-  totalCount: 50,
+  itemCount: 50,
 }));
 
 test('Pager tabindex and state properties', async (t) => {
@@ -81,7 +81,7 @@ test('Pager tabindex and state properties', async (t) => {
     .expect(pager.element.hasClass('dx-state-active'))
     .ok();
 }).before(async () => createWidget('dxPager', {
-  totalCount: 50,
+  itemCount: 50,
   disabled: false,
   width: '100%',
   focusStateEnabled: true,
@@ -105,7 +105,7 @@ test('Pager focus method without focusStateEnabled', async (t) => {
     .ok();
 }).before(async () => createWidget('dxPager', {
   focusStateEnabled: false,
-  totalCount: 50,
+  itemCount: 50,
 }));
 
 test('Pager focus method with focusStateEnabled', async (t) => {
@@ -123,5 +123,5 @@ test('Pager focus method with focusStateEnabled', async (t) => {
     .ok();
 }).before(async () => createWidget('dxPager', {
   focusStateEnabled: true,
-  totalCount: 50,
+  itemCount: 50,
 }));

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

@@ -46,8 +46,6 @@ export {
     NewRowInfo,
     NewRowPosition,
     Pager,
-    PagerDisplayMode,
-    PagerPageSize,
     PagingBase,
     RowDragging,
     RowDraggingTemplateData,

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

@@ -1,6 +1,7 @@
 export {
     ApplyValueMode,
     AsyncRule,
+    BasePagerOptions,
     ButtonStyle,
     ButtonType,
     CompareRule,
@@ -28,6 +29,9 @@ export {
     Orientation,
     PageLoadMode,
     PageOrientation,
+    PagerAllPagesMode,
+    PagerDisplayMode,
+    PagerPageSize,
     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 { DxPagerComponent, DxPagerModule } from 'devextreme-angular/ui/pager';
 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 { DxPagerModule } from 'devextreme-angular/ui/pager';
 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,
+    DxPagerModule,
     DxPieChartModule,
     DxPivotGridModule,
     DxPivotGridFieldChooserModule,
@@ -207,6 +209,7 @@ import { DxTemplateModule } from 'devextreme-angular/core';
     DxMenuModule,
     DxMultiViewModule,
     DxNumberBoxModule,
+    DxPagerModule,
     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';
@@ -804,10 +804,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);
     }
 
@@ -1832,7 +1832,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,7 @@ import {
 
 
 
-import { Mode } from 'devextreme/common';
-import { PagerDisplayMode, PagerPageSize } from 'devextreme/common/grids';
+import { Mode, PagerDisplayMode, PagerPageSize } from 'devextreme/common';
 
 import {
     NestedOptionHost,

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,69 @@
+/* tslint:disable:max-line-length */
+
+import { NestedOption } from 'devextreme-angular/core';
+import {
+    Component,
+} from '@angular/core';
+
+import { Mode, PagerDisplayMode, PagerPageSize } from 'devextreme/common';
+
+@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(): PagerDisplayMode {
+        return this._getOption('displayMode');
+    }
+    set displayMode(value: PagerDisplayMode) {
+        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);
+    }
+}

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

@@ -1,99 +1,43 @@
 /* tslint:disable:max-line-length */
 
+/* tslint:disable:use-input-property-decorator */
 
 import {
     Component,
     OnInit,
     OnDestroy,
     NgModule,
     Host,
-    SkipSelf,
-    Input
+    SkipSelf
 } from '@angular/core';
 
 
 
 
-import { Mode } from 'devextreme/common';
-import { PagerDisplayMode, PagerPageSize } from 'devextreme/common/grids';
 
 import {
     NestedOptionHost,
 } from 'devextreme-angular/core';
-import { NestedOption } from 'devextreme-angular/core';
+import { DxoPager } from './base/pager';
 
 
 @Component({
     selector: 'dxo-pager',
     template: '',
     styles: [''],
-    providers: [NestedOptionHost]
+    providers: [NestedOptionHost],
+    inputs: [
+        'allowedPageSizes',
+        'displayMode',
+        'infoText',
+        'label',
+        'showInfo',
+        'showNavigationButtons',
+        'showPageSizeSelector',
+        'visible'
+    ]
 })
-export class DxoPagerComponent extends NestedOption implements OnDestroy, OnInit  {
-    @Input()
-    get allowedPageSizes(): Mode | Array<PagerPageSize | number> {
-        return this._getOption('allowedPageSizes');
-    }
-    set allowedPageSizes(value: Mode | Array<PagerPageSize | number>) {
-        this._setOption('allowedPageSizes', value);
-    }
-
-    @Input()
-    get displayMode(): PagerDisplayMode {
-        return this._getOption('displayMode');
-    }
-    set displayMode(value: PagerDisplayMode) {
-        this._setOption('displayMode', value);
-    }
-
-    @Input()
-    get infoText(): string {
-        return this._getOption('infoText');
-    }
-    set infoText(value: string) {
-        this._setOption('infoText', value);
-    }
-
-    @Input()
-    get label(): string {
-        return this._getOption('label');
-    }
-    set label(value: string) {
-        this._setOption('label', value);
-    }
-
-    @Input()
-    get showInfo(): boolean {
-        return this._getOption('showInfo');
-    }
-    set showInfo(value: boolean) {
-        this._setOption('showInfo', value);
-    }
-
-    @Input()
-    get showNavigationButtons(): boolean {
-        return this._getOption('showNavigationButtons');
-    }
-    set showNavigationButtons(value: boolean) {
-        this._setOption('showNavigationButtons', value);
-    }
-
-    @Input()
-    get showPageSizeSelector(): boolean {
-        return this._getOption('showPageSizeSelector');
-    }
-    set showPageSizeSelector(value: boolean) {
-        this._setOption('showPageSizeSelector', value);
-    }
-
-    @Input()
-    get visible(): Mode | boolean {
-        return this._getOption('visible');
-    }
-    set visible(value: Mode | boolean) {
-        this._setOption('visible', value);
-    }
-
+export class DxoPagerComponent extends DxoPager implements OnDestroy, OnInit  {
 
     protected get _optionPath() {
         return 'pager';