@progress/kendo-angular-pager 4.1.0-dev.202211230837 → 11.0.0-develop.79

package/{esm2015/pager/pager.component.js → esm2020/pager/pager.component.mjs}

@@ -1,14 +1,14 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { RESPONSIVE_BREAKPOINT_MEDIUM, RESPONSIVE_BREAKPOINT_LARGE } from './common/constants';
-import { Component, Input, EventEmitter, Output, HostBinding, ViewChild, ContentChild, HostListener } from '@angular/core';
+import { Component, Input, EventEmitter, Output, HostBinding, ViewChild, ElementRef, ContentChild, Renderer2, NgZone, HostListener } from '@angular/core';
 import { PagerTemplateDirective } from "./pager-template.directive";
 import { anyChanged, Keys, ResizeSensorComponent } from "@progress/kendo-angular-common";
 import { PagerContextService } from "./pager-context.service";
 import { Subscription } from "rxjs";
-import { DEFAULT_PAGE_SIZE_VALUES } from '../util';
+import { DEFAULT_PAGE_SIZE_VALUES, getStylingClasses, DEFAULT_SIZE } from '../util';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -21,8 +21,8 @@ import * as i4 from "./pager-prev-buttons.component";
 import * as i5 from "./pager-numeric-buttons.component";
 import * as i6 from "./pager-input.component";
 import * as i7 from "./pager-next-buttons.component";
-import * as i8 from "./pager-info.component";
-import * as i9 from "./pager-page-sizes.component";
+import * as i8 from "./pager-page-sizes.component";
+import * as i9 from "./pager-info.component";
 import * as i10 from "@progress/kendo-angular-common";
 import * as i11 from "./localization/localized-messages.directive";
 import * as i12 from "@angular/common";
@@ -79,6 +79,7 @@ export class PagerComponent {
         this._pageSizeValues = DEFAULT_PAGE_SIZE_VALUES;
         this.isInnerNavigationEnabled = false;
         this._navigable = false;
+        this._size = DEFAULT_SIZE;
         this.resizeHandler = () => {
             if (this.template) {
                 return;
@@ -86,16 +87,16 @@ export class PagerComponent {
             const element = this.element.nativeElement;
             const width = element.offsetWidth;
             if (width < RESPONSIVE_BREAKPOINT_MEDIUM) {
-                element.classList.remove('k-pager-md');
-                element.classList.add('k-pager-sm');
+                element.classList.remove('k-pager-mobile-md');
+                element.classList.add('k-pager-mobile-sm');
             }
             else if (width >= RESPONSIVE_BREAKPOINT_MEDIUM && width < RESPONSIVE_BREAKPOINT_LARGE) {
-                element.classList.add('k-pager-md');
-                element.classList.remove('k-pager-sm');
+                element.classList.add('k-pager-mobile-md');
+                element.classList.remove('k-pager-mobile-sm');
             }
             else {
-                element.classList.remove('k-pager-md');
-                element.classList.remove('k-pager-sm');
+                element.classList.remove('k-pager-mobile-md');
+                element.classList.remove('k-pager-mobile-sm');
             }
         };
         validatePackage(packageMetadata);
@@ -110,6 +111,9 @@ export class PagerComponent {
     set pageSizeValues(pageSizeValues) {
         this._pageSizeValues = Array.isArray(pageSizeValues) ? pageSizeValues : pageSizeValues ? DEFAULT_PAGE_SIZE_VALUES : false;
     }
+    get pageSizeValues() {
+        return this._pageSizeValues;
+    }
     /**
      * If set to `true`, the user can use dedicated shortcuts to interact with the Pager ([see example]({% slug keyboard_navigation_pager %})).
      * By default, navigation is disabled and the Pager content is accessible in the normal tab sequence.
@@ -124,6 +128,23 @@ export class PagerComponent {
         return this._navigable;
     }
     ;
+    /**
+     * Specifies the padding of all Pager elements.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
+    }
+    get size() {
+        return this._size;
+    }
     get dir() {
         return this.direction;
     }
@@ -140,9 +161,6 @@ export class PagerComponent {
     get currentPage() {
         return Math.floor((this.skip || 0) / this.pageSize) + 1;
     }
-    get pageSizeValues() {
-        return this._pageSizeValues;
-    }
     get templateContext() {
         const context = this._templateContext;
         context.totalPages = this.totalPages;
@@ -170,6 +188,7 @@ export class PagerComponent {
     ngAfterViewInit() {
         this.resizeHandler();
         this.renderer.setAttribute(this.element.nativeElement, 'aria-label', this.ariaLabel);
+        this.handleClasses(this.size, 'size');
     }
     ngOnChanges(changes) {
         if (anyChanged(["pageSize", "skip", "total"], changes, false)) {
@@ -232,11 +251,13 @@ export class PagerComponent {
         const isFirstPage = this.currentPage === 1;
         const isLastPage = this.currentPage === this.totalPages;
         this.ngZone.run(() => {
-            if (isHome && !isFirstPage) {
-                this.pagerContext.changePage(0);
+            if (isHome) {
+                e.preventDefault();
+                !isFirstPage && this.pagerContext.changePage(0);
             }
-            else if (isEnd && !isLastPage) {
-                this.pagerContext.changePage(this.totalPages - 1);
+            else if (isEnd) {
+                e.preventDefault();
+                !isLastPage && this.pagerContext.changePage(this.totalPages - 1);
             }
             else if (this.isInnerNavigationEnabled) {
                 if (isEsc) {
@@ -248,11 +269,13 @@ export class PagerComponent {
                 }
             }
             else {
-                if (isArrowLeftOrPageUp && !isFirstPage) {
-                    this.pagerContext.prevPage();
+                if (isArrowLeftOrPageUp) {
+                    e.preventDefault();
+                    !isFirstPage && this.pagerContext.prevPage();
                 }
-                else if (isArrowRightOrPageDown && !isLastPage) {
-                    this.pagerContext.nextPage();
+                else if (isArrowRightOrPageDown) {
+                    e.preventDefault();
+                    !isLastPage && this.pagerContext.nextPage();
                 }
                 else if (isEnter) {
                     if (e.target !== wrapper) {
@@ -261,7 +284,7 @@ export class PagerComponent {
                     e.preventDefault();
                     const [firstFocusable] = this.navigationService.getFirstAndLastFocusable(wrapper);
                     this.navigationService.toggleInnerNavigation(true);
-                    firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
+                    firstFocusable?.focus();
                 }
             }
         });
@@ -269,9 +292,19 @@ export class PagerComponent {
     innerNavigationChange(value) {
         this.isInnerNavigationEnabled = value;
     }
+    handleClasses(value, input) {
+        const elem = this.element.nativeElement;
+        const classes = getStylingClasses('pager', input, this[input], value);
+        if (classes.toRemove) {
+            this.renderer.removeClass(elem, classes.toRemove);
+        }
+        if (classes.toAdd) {
+            this.renderer.addClass(elem, classes.toAdd);
+        }
+    }
 }
-PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.PagerNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: PagerComponent, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
+PagerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, deps: [{ token: i1.PagerContextService }, { token: i0.ElementRef }, { token: i2.LocalizationService }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i3.PagerNavigationService }], target: i0.ɵɵFactoryTarget.Component });
+PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PagerComponent, selector: "kendo-datapager", inputs: { total: "total", skip: "skip", pageSize: "pageSize", buttonCount: "buttonCount", info: "info", type: "type", pageSizeValues: "pageSizeValues", previousNext: "previousNext", navigable: "navigable", size: "size" }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "focusin": "focusHandler($event)" }, properties: { "class.k-pager": "this.pagerClass", "attr.role": "this.widgetRole", "attr.aria-roledescription": "this.roleDescription", "attr.aria-keyshortcuts": "this.keyShortcuts", "attr.tabindex": "this.hostTabindex", "attr.dir": "this.dir" } }, providers: [
         LocalizationService,
         PagerContextService,
         PagerNavigationService
@@ -317,19 +350,22 @@ PagerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-datapager-prev-buttons *ngIf="previousNext"></kendo-datapager-prev-buttons>
-            <kendo-datapager-numeric-buttons
-                *ngIf="type === 'numeric' && buttonCount > 0"
-                [buttonCount]="buttonCount">
-            </kendo-datapager-numeric-buttons>
-            <kendo-datapager-input *ngIf="type === 'input'"></kendo-datapager-input>
-            <kendo-datapager-next-buttons *ngIf="previousNext"></kendo-datapager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
+                <kendo-datapager-numeric-buttons
+                    [size]="size"
+                    *ngIf="type === 'numeric' && buttonCount > 0"
+                    [buttonCount]="buttonCount">
+                </kendo-datapager-numeric-buttons>
+                <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
+                <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
+            </div>
+            <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
             <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
-            <kendo-datapager-page-sizes *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
         </ng-container>
         <kendo-resize-sensor></kendo-resize-sensor>
-  `, isInline: true, components: [{ type: i4.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons" }, { type: i5.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount"] }, { type: i6.PagerInputComponent, selector: "kendo-datapager-input" }, { type: i7.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons" }, { type: i8.PagerInfoComponent, selector: "kendo-datapager-info" }, { type: i9.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes"] }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerComponent, decorators: [{
+  `, isInline: true, components: [{ type: i4.PagerPrevButtonsComponent, selector: "kendo-datapager-prev-buttons", inputs: ["size"] }, { type: i5.PagerNumericButtonsComponent, selector: "kendo-datapager-numeric-buttons", inputs: ["buttonCount", "size"] }, { type: i6.PagerInputComponent, selector: "kendo-datapager-input", inputs: ["size"] }, { type: i7.PagerNextButtonsComponent, selector: "kendo-datapager-next-buttons", inputs: ["size"] }, { type: i8.PagerPageSizesComponent, selector: "kendo-datapager-page-sizes", inputs: ["pageSizes", "size"] }, { type: i9.PagerInfoComponent, selector: "kendo-datapager-info" }, { type: i10.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i11.LocalizedMessagesDirective, selector: "[kendoDataPagerLocalizedMessages]" }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-datapager',
@@ -381,15 +417,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
             [ngTemplateOutletContext]="templateContext">
         </ng-container>
         <ng-container *ngIf="!template?.templateRef">
-            <kendo-datapager-prev-buttons *ngIf="previousNext"></kendo-datapager-prev-buttons>
-            <kendo-datapager-numeric-buttons
-                *ngIf="type === 'numeric' && buttonCount > 0"
-                [buttonCount]="buttonCount">
-            </kendo-datapager-numeric-buttons>
-            <kendo-datapager-input *ngIf="type === 'input'"></kendo-datapager-input>
-            <kendo-datapager-next-buttons *ngIf="previousNext"></kendo-datapager-next-buttons>
+            <div class="k-pager-numbers-wrap">
+                <kendo-datapager-prev-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-prev-buttons>
+                <kendo-datapager-numeric-buttons
+                    [size]="size"
+                    *ngIf="type === 'numeric' && buttonCount > 0"
+                    [buttonCount]="buttonCount">
+                </kendo-datapager-numeric-buttons>
+                <kendo-datapager-input [size]="size" *ngIf="type === 'input'"></kendo-datapager-input>
+                <kendo-datapager-next-buttons [size]="size" *ngIf="previousNext"></kendo-datapager-next-buttons>
+            </div>
+            <kendo-datapager-page-sizes [size]="size" *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
             <kendo-datapager-info *ngIf='info'></kendo-datapager-info>
-            <kendo-datapager-page-sizes *ngIf="pageSizeValues" [pageSizes]="pageSizeValues"></kendo-datapager-page-sizes>
         </ng-container>
         <kendo-resize-sensor></kendo-resize-sensor>
   `
@@ -418,6 +457,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImpo
                 type: Input
             }], navigable: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], pageChange: [{
                 type: Output
             }], pageSizeChange: [{

package/{esm2015/pager/pager.module.js → esm2020/pager/pager.module.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { L10N_PREFIX } from '@progress/kendo-angular-l10n';
@@ -7,6 +7,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NumericTextBoxModule } from '@progress/kendo-angular-inputs';
 import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { PagerComponent } from './pager.component';
 import { PagerPrevButtonsComponent } from './pager-prev-buttons.component';
 import { PagerNextButtonsComponent } from './pager-next-buttons.component';
@@ -25,6 +26,7 @@ const importedModules = [
     CommonModule,
     NumericTextBoxModule,
     DropDownListModule,
+    ButtonsModule,
     EventsModule,
     ResizeSensorModule
 ];
@@ -64,8 +66,8 @@ export class PagerModule {
         ];
     }
 }
-PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, declarations: [PagerComponent,
+PagerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, declarations: [PagerComponent,
         PagerPrevButtonsComponent,
         PagerNextButtonsComponent,
         PagerNumericButtonsComponent,
@@ -78,6 +80,7 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         PagerFocusableDirective], imports: [CommonModule,
         NumericTextBoxModule,
         DropDownListModule,
+        ButtonsModule,
         EventsModule,
         ResizeSensorModule], exports: [PagerComponent,
         PagerPrevButtonsComponent,
@@ -90,8 +93,8 @@ PagerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         LocalizedMessagesDirective,
         CustomMessagesComponent,
         PagerFocusableDirective] });
-PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, providers: [providers], imports: [[...importedModules]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: PagerModule, decorators: [{
+PagerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, providers: [providers], imports: [[...importedModules]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PagerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [INTERNAL_COMPONENTS],

package/esm2020/pager/pagesize-item.interface.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/{esm2015/pager/pagesizechange-event.js → esm2020/pager/pagesizechange-event.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from './preventable-event';

package/{esm2015/pager/preventable-event.js → esm2020/pager/preventable-event.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**

package/{esm2015/kendo-angular-pager.js → esm2020/progress-kendo-angular-pager.mjs}

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './main';
+export * from './index';

package/{esm2015/util.js → esm2020/util.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
@@ -32,3 +32,28 @@ export const focusableSelector = [
     '*[tabindex]:not([disabled])',
     '*[contenteditable]:not([disabled]):not([contenteditable="false"])'
 ].join(',');
+/**
+ * @hidden
+ */
+export const DEFAULT_SIZE = 'medium';
+const SIZES = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+/**
+ * @hidden
+ *
+ * Returns the styling classes to be added and removed
+ */
+export const getStylingClasses = (componentType, stylingOption, previousValue, newValue) => {
+    switch (stylingOption) {
+        case 'size':
+            return {
+                toRemove: `k-${componentType}-${SIZES[previousValue]}`,
+                toAdd: newValue !== 'none' ? `k-${componentType}-${SIZES[newValue]}` : ''
+            };
+        default:
+            break;
+    }
+};