@progress/kendo-angular-treelist 4.0.6-dev.202203090952 → 5.0.0-next.202204130954

package/esm2015/pager/pager-element.component.js

@@ -0,0 +1,86 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./pager-context.service";
+/**
+ * @hidden
+ */
+export class PagerElementComponent {
+    constructor(localization, pagerContext, cd) {
+        this.localization = localization;
+        this.pagerContext = pagerContext;
+        this.cd = cd;
+        this.total = this.pagerContext.total;
+        this.skip = this.pagerContext.skip;
+        this.pageSize = this.pagerContext.pageSize;
+        this.allCount = this.pagerContext.allCount;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerElementComponent
+     */
+    get currentPage() {
+        return Math.floor((this.skip || 0) / this.pageSize) + 1;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerElementComponent
+     */
+    get totalPages() {
+        return Math.ceil((this.total || 0) / this.pageSize);
+    }
+    /**
+     * @hidden
+     *
+     * @param {string} key
+     * @returns {string}
+     *
+     * @memberOf PagerElementComponent
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
+    /**
+     * @hidden
+     *
+     * @param {number} page
+     *
+     * @memberOf PagerElementComponent
+     */
+    changePage(page) {
+        this.pagerContext.changePage(page);
+        return false;
+    }
+    /**
+     * @hidden
+     *
+     * @memberOf PagerElementComponent
+     */
+    ngOnInit() {
+        this.subscriptions = this.pagerContext.changes.subscribe(this.onChanges.bind(this));
+        this.subscriptions.add(this.localization.changes.subscribe(() => this.cd.markForCheck()));
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+}
+PagerElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerElementComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerElementComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerElementComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: ''
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }]; } });

package/esm2015/pager/pager-info.component.js

@@ -0,0 +1,72 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+// eslint-disable no-access-missing-member
+import { Component, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { PagerElementComponent } from './pager-element.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./pager-context.service";
+/**
+ * Displays information about the current page and the total number of records ([see example]({% slug paging_treelist %}#toc-pager-templates)).
+ */
+export class PagerInfoComponent extends PagerElementComponent {
+    constructor(localization, cd, pagerContext) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerInfoComponent
+     */
+    get currentPageText() {
+        return this.total ? this.currentPage : 0;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number}
+     * @memberOf PagerInfoComponent
+     */
+    get maxPage() {
+        return Math.ceil(this.total / this.pageSize);
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {boolean}
+     * @memberOf PagerInfoComponent
+     */
+    get classes() {
+        return true;
+    }
+    onChanges({ allCount, total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.allCount = allCount;
+        this.cd.markForCheck();
+    }
+}
+PagerInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerInfoComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerInfoComponent, selector: "kendo-treelist-pager-info", host: { properties: { "class.k-pager-info": "this.classes", "class.k-label": "this.classes" } }, usesInheritance: true, ngImport: i0, template: `{{textFor('pagerPage')}} {{currentPageText}} {{textFor('pagerOf')}} {{maxPage}} ({{allCount}} {{textFor('pagerItemsTotal')}})`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerInfoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-treelist-pager-info',
+                    template: `{{textFor('pagerPage')}} {{currentPageText}} {{textFor('pagerOf')}} {{maxPage}} ({{allCount}} {{textFor('pagerItemsTotal')}})`
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { classes: [{
+                type: HostBinding,
+                args: ["class.k-pager-info"]
+            }, {
+                type: HostBinding,
+                args: ["class.k-label"]
+            }] } });

package/esm2015/pager/pager-input.component.js

@@ -0,0 +1,133 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NumericTextBoxComponent } from '@progress/kendo-angular-inputs';
+// eslint-disable no-access-missing-member
+import { Component, ViewChild } from '@angular/core';
+import { PagerElementComponent } from './pager-element.component';
+import { Keys } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./pager-context.service";
+import * as i3 from "@progress/kendo-angular-inputs";
+import * as i4 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-common";
+/**
+ * Displays an input element which allows the typing and rendering of page numbers.
+ */
+export class PagerInputComponent extends PagerElementComponent {
+    constructor(localization, pagerContext, zone, cd) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.zone = zone;
+        /**
+         * @hidden
+         *
+         * @param {string} value
+         *
+         * @memberOf PagerInputComponent
+         */
+        this.handleKeyDown = (event) => {
+            let incomingValue = this.numericInput.value || this.current;
+            if (event.keyCode === Keys.Enter) {
+                event.preventDefault();
+                if (incomingValue !== this.current) {
+                    this.zone.run(() => {
+                        this.changePage(incomingValue - 1);
+                    });
+                }
+            }
+        };
+        /**
+         * @hidden
+         *
+         * @param {string} value
+         *
+         * @memberOf PagerInputComponent
+         */
+        this.handleBlur = () => {
+            const inputValue = this.numericInput.value;
+            if (!inputValue) {
+                this.numericInput.writeValue(this.current);
+                return;
+            }
+            if (inputValue !== this.current) {
+                this.zone.run(() => {
+                    this.changePage(inputValue - 1);
+                });
+            }
+        };
+    }
+    /**
+     * @hidden
+     */
+    get current() {
+        return this.hasPages ? this.currentPage : 0;
+    }
+    get hasPages() {
+        return this.totalPages !== 0;
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+PagerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerInputComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerInputComponent, selector: "kendo-treelist-pager-input", viewQueries: [{ propertyName: "numericInput", first: true, predicate: NumericTextBoxComponent, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: `
+     <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
+        {{textFor('pagerPage')}}
+        <kendo-numerictextbox
+            [style.margin]="'0 1ex'"
+            [style.width]="'3em'"
+            [spinners]="false"
+            [decimals]="0"
+            format="n0"
+            [disabled]="!hasPages"
+            [value]="current"
+            [min]="hasPages ? 1 : 0"
+            [max]="totalPages"
+            [autoCorrect]="true"
+            [title]="textFor('pagerPageNumberInputTitle')"
+            [kendoEventsOutsideAngular]="{
+                keydown: handleKeyDown,
+                focusout: handleBlur
+            }">
+        </kendo-numerictextbox>
+            {{textFor('pagerOf')}} {{totalPages}}
+     </span>
+    `, isInline: true, components: [{ type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-treelist-pager-input',
+                    template: `
+     <span [ngClass]="{'k-pager-input': true, 'k-label': true}">
+        {{textFor('pagerPage')}}
+        <kendo-numerictextbox
+            [style.margin]="'0 1ex'"
+            [style.width]="'3em'"
+            [spinners]="false"
+            [decimals]="0"
+            format="n0"
+            [disabled]="!hasPages"
+            [value]="current"
+            [min]="hasPages ? 1 : 0"
+            [max]="totalPages"
+            [autoCorrect]="true"
+            [title]="textFor('pagerPageNumberInputTitle')"
+            [kendoEventsOutsideAngular]="{
+                keydown: handleKeyDown,
+                focusout: handleBlur
+            }">
+        </kendo-numerictextbox>
+            {{textFor('pagerOf')}} {{totalPages}}
+     </span>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { numericInput: [{
+                type: ViewChild,
+                args: [NumericTextBoxComponent, { static: true }]
+            }] } });

package/esm2015/pager/pager-next-buttons.component.js

@@ -0,0 +1,115 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+// eslint-disable  no-access-missing-member
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { PagerElementComponent } from './pager-element.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./pager-context.service";
+import * as i3 from "@angular/common";
+/**
+ * Displays buttons for navigating to the next and to the last page ([see example]({% slug paging_treelist %}#toc-pager-templates)).
+ */
+export class PagerNextButtonsComponent extends PagerElementComponent {
+    constructor(localization, pagerContext, cd) {
+        super(localization, pagerContext, cd);
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {boolean}
+     * @memberOf PagerNextButtonsComponent
+     */
+    get disabled() {
+        return this.currentPage === this.totalPages || !this.total;
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+PagerNextButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNextButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PagerContextService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerNextButtonsComponent, selector: "kendo-treelist-pager-next-buttons", usesInheritance: true, ngImport: i0, template: `
+        <a  href="#"
+            tabindex="-1"
+            [title]="textFor('pagerNextPage')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false"
+            [ngClass]="{
+                'k-link': true,
+                'k-pager-nav': true,
+                'k-state-disabled': disabled,
+                '': true
+            }">
+            <span [attr.aria-label]="textFor('pagerNextPage')"
+                [ngClass]="{
+                    'k-icon':true,
+                    'k-i-arrow-e': true
+                }">
+            </span>
+        </a>
+        <a  href="#"
+            tabindex="-1"
+            [title]="textFor('pagerLastPage')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false"
+            [ngClass]="{
+                'k-link': true,
+                'k-pager-nav': true,
+                'k-state-disabled': disabled,
+                'k-pager-last': true
+            }">
+            <span [attr.aria-label]="textFor('pagerLastPage')"
+                [ngClass]="{
+                    'k-icon':true,
+                    'k-i-seek-e': true
+                }">
+            </span>
+        </a>
+    `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNextButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-treelist-pager-next-buttons',
+                    template: `
+        <a  href="#"
+            tabindex="-1"
+            [title]="textFor('pagerNextPage')"
+            (click)="currentPage !== totalPages ? changePage(currentPage) : false"
+            [ngClass]="{
+                'k-link': true,
+                'k-pager-nav': true,
+                'k-state-disabled': disabled,
+                '': true
+            }">
+            <span [attr.aria-label]="textFor('pagerNextPage')"
+                [ngClass]="{
+                    'k-icon':true,
+                    'k-i-arrow-e': true
+                }">
+            </span>
+        </a>
+        <a  href="#"
+            tabindex="-1"
+            [title]="textFor('pagerLastPage')"
+            (click)="currentPage !== totalPages ? changePage(totalPages-1) : false"
+            [ngClass]="{
+                'k-link': true,
+                'k-pager-nav': true,
+                'k-state-disabled': disabled,
+                'k-pager-last': true
+            }">
+            <span [attr.aria-label]="textFor('pagerLastPage')"
+                [ngClass]="{
+                    'k-icon':true,
+                    'k-i-seek-e': true
+                }">
+            </span>
+        </a>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PagerContextService }, { type: i0.ChangeDetectorRef }]; } });

package/esm2015/pager/pager-numeric-buttons.component.js

@@ -0,0 +1,197 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { PagerElementComponent } from './pager-element.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./pager-context.service";
+import * as i3 from "@angular/common";
+/**
+ * Displays numeric buttons to enable navigation between the pages.
+ */
+export class PagerNumericButtonsComponent extends PagerElementComponent {
+    constructor(localization, cd, pagerContext) {
+        super(localization, pagerContext, cd);
+        this.pagerContext = pagerContext;
+        this.numbersWrapClass = true;
+    }
+    /**
+     * @hidden
+     *
+     * @readonly
+     * @type {number[]}
+     * @memberOf PagerNumericButtonsComponent
+     */
+    get buttons() {
+        let result = [];
+        for (let idx = this.start; idx <= this.end; idx++) {
+            result.push(idx);
+        }
+        return result;
+    }
+    /**
+     * @hidden
+     */
+    get end() {
+        return Math.min((this.start + this.buttonCount) - 1, this.totalPages);
+    }
+    /**
+     * @hidden
+     */
+    get start() {
+        const page = this.currentPage;
+        const buttonCount = this.buttonCount;
+        if (page > buttonCount) {
+            const reminder = (page % buttonCount);
+            return (reminder === 0) ? (page - buttonCount) + 1 : (page - reminder) + 1;
+        }
+        return 1;
+    }
+    /**
+     * @hidden
+     */
+    pageLabel(num) {
+        const pageText = this.textFor('pagerPage');
+        if (pageText) {
+            return pageText + ' ' + num;
+        }
+        return num.toString();
+    }
+    /**
+     * @hidden
+     */
+    onSelectChange(e) {
+        const target = e.target;
+        const valueAsNumber = Number(target.value);
+        if (!Number.isNaN(valueAsNumber)) {
+            this.changePage(valueAsNumber - 1);
+        }
+        else {
+            if (target.value === 'previousButtons') {
+                this.changePage(this.start - 2);
+            }
+            else {
+                this.changePage(this.end);
+            }
+        }
+    }
+    onChanges({ total, skip, pageSize }) {
+        this.total = total;
+        this.skip = skip;
+        this.pageSize = pageSize;
+        this.cd.markForCheck();
+    }
+}
+PagerNumericButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNumericButtonsComponent, deps: [{ token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i2.PagerContextService }], target: i0.ɵɵFactoryTarget.Component });
+PagerNumericButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: PagerNumericButtonsComponent, selector: "kendo-treelist-pager-numeric-buttons", inputs: { buttonCount: "buttonCount" }, host: { properties: { "class.k-pager-numbers-wrap": "this.numbersWrapClass" } }, usesInheritance: true, ngImport: i0, template: `
+       <select
+            class="k-dropdown"
+            [value]="(currentPage).toString()"
+            (change)="onSelectChange($event)">
+            <option *ngIf="start > 1"
+                class="k-link"
+                value="previousButtons"
+                [attr.aria-label]="pageLabel(start - 1)">...
+            </option>
+            <option *ngFor="let num of buttons"
+                [value]="num.toString()"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [ngClass]="{'k-link': true, 'k-state-selected':currentPage === num}">
+                {{num}}
+            </option>
+            <option *ngIf="end < totalPages"
+                value="nextButtons"
+                class="k-link"
+                [attr.aria-label]="pageLabel(end + 1)">...
+            </option>
+        </select>
+        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
+            <li *ngIf="start > 1">
+                <a  class="k-link"
+                    [attr.aria-label]="pageLabel(start - 1)"
+                    href="#"
+                    tabindex="-1"
+                    (click)="changePage(start - 2)">...</a>
+            </li>
+            <li *ngFor="let num of buttons">
+                <a  href="#"
+                    [attr.aria-label]="pageLabel(num)"
+                    tabindex="-1"
+                    [ngClass]="{'k-link': true, 'k-state-selected':currentPage === num}"
+                    (click)="changePage(num - 1)">
+                    {{num}}
+                </a>
+            </li>
+            <li *ngIf="end < totalPages">
+                <a  class="k-link"
+                    [attr.aria-label]="pageLabel(end + 1)"
+                    href="#"
+                    tabindex="-1"
+                    (click)="changePage(end)">...</a>
+            </li>
+        </ul>
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PagerNumericButtonsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    selector: 'kendo-treelist-pager-numeric-buttons',
+                    template: `
+       <select
+            class="k-dropdown"
+            [value]="(currentPage).toString()"
+            (change)="onSelectChange($event)">
+            <option *ngIf="start > 1"
+                class="k-link"
+                value="previousButtons"
+                [attr.aria-label]="pageLabel(start - 1)">...
+            </option>
+            <option *ngFor="let num of buttons"
+                [value]="num.toString()"
+                [attr.aria-label]="pageLabel(num)"
+                [attr.aria-current]="currentPage === num ? 'page' : undefined"
+                [ngClass]="{'k-link': true, 'k-state-selected':currentPage === num}">
+                {{num}}
+            </option>
+            <option *ngIf="end < totalPages"
+                value="nextButtons"
+                class="k-link"
+                [attr.aria-label]="pageLabel(end + 1)">...
+            </option>
+        </select>
+        <ul [ngClass]="{'k-pager-numbers': true, 'k-reset': true}">
+            <li *ngIf="start > 1">
+                <a  class="k-link"
+                    [attr.aria-label]="pageLabel(start - 1)"
+                    href="#"
+                    tabindex="-1"
+                    (click)="changePage(start - 2)">...</a>
+            </li>
+            <li *ngFor="let num of buttons">
+                <a  href="#"
+                    [attr.aria-label]="pageLabel(num)"
+                    tabindex="-1"
+                    [ngClass]="{'k-link': true, 'k-state-selected':currentPage === num}"
+                    (click)="changePage(num - 1)">
+                    {{num}}
+                </a>
+            </li>
+            <li *ngIf="end < totalPages">
+                <a  class="k-link"
+                    [attr.aria-label]="pageLabel(end + 1)"
+                    href="#"
+                    tabindex="-1"
+                    (click)="changePage(end)">...</a>
+            </li>
+        </ul>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i2.PagerContextService }]; }, propDecorators: { numbersWrapClass: [{
+                type: HostBinding,
+                args: ['class.k-pager-numbers-wrap']
+            }], buttonCount: [{
+                type: Input
+            }] } });