import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class PaginationComponent {
    constructor() { }
    ngOnInit() {
    }
    next() {
        this.dataSource.createPaginator(this.dataSource.viewport.paginator.nextPage, false);
    }
    previous() {
        this.dataSource.createPaginator(this.dataSource.viewport.paginator.prePage, false);
    }
    goTo(page) {
        this.dataSource.createPaginator(page, false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: PaginationComponent, selector: "et-pagination", inputs: { state: "state", dataSource: "dataSource" }, ngImport: i0, template: "<div class=\"bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6\">\r\n\r\n  <div *ngIf=\"state.paginator.isVisible\" class=\"flex-1 flex justify-between sm:hidden\">\r\n\r\n    <button\r\n      (click)=\"previous()\"\r\n      [disabled]=\"dataSource.viewport.paginator.prePage == null\"\r\n      [ngClass]=\"{ 'cursor-not-allowed': dataSource.viewport.paginator.prePage == null }\"\r\n      class=\"relative inline-flex items-center px-4 py-2 cursor-pointer border border-solid border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50\">\r\n      {{ state.locale.paginator.previous }}\r\n    </button>\r\n\r\n    <button\r\n      (click)=\"next()\"\r\n      [disabled]=\"dataSource.viewport.paginator.nextPage == null\"\r\n      [ngClass]=\"{ 'cursor-not-allowed': dataSource.viewport.paginator.nextPage == null }\"\r\n      class=\"ml-3 relative inline-flex items-center px-4 py-2 cursor-pointer border border-solid border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50\">\r\n      {{ state.locale.paginator.next }}\r\n    </button>\r\n\r\n  </div>\r\n\r\n  <div class=\"hidden sm:flex-1 sm:flex sm:items-center sm:justify-between\">\r\n\r\n    <div>\r\n      <p class=\"text-sm text-gray-700\">\r\n\r\n        <ng-container *ngIf=\"state.paginator.isVisible\">\r\n          {{ state.locale.paginator.showing }}\r\n          <span class=\"font-medium\">{{ dataSource.viewport.paginator.showing }}</span>\r\n          {{ state.locale.paginator.to }}\r\n          <span class=\"font-medium\">{{ dataSource.viewport.paginator.to }}</span>\r\n          {{ state.locale.paginator.of }}\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"state.paginator.showResults && dataSource.viewport.paginator?.total > 0\">\r\n          <span class=\"font-medium\">{{ dataSource.viewport.paginator.total }}</span>\r\n          {{ state.locale.paginator.results }}\r\n        </ng-container>\r\n\r\n      </p>\r\n\r\n    </div>\r\n\r\n    <div *ngIf=\"state.paginator.isVisible\">\r\n      <nav class=\"relative z-0 inline-flex rounded-md shadow-sm -space-x-px\" aria-label=\"Pagination\">\r\n\r\n        <button\r\n          (click)=\"previous()\"\r\n          [disabled]=\"dataSource.viewport.paginator.prePage == null\"\r\n          [ngClass]=\"{ 'cursor-not-allowed': dataSource.viewport.paginator.prePage == null }\"\r\n          class=\"relative inline-flex items-center px-2 py-2 rounded-l-md cursor-pointer border border-solid border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50\">\r\n\r\n          <span class=\"sr-only\">{{ state.locale.paginator.previous }}</span>\r\n\r\n          <!-- Heroicon name: solid/chevron-left -->\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n\r\n        <ng-container *ngFor=\"let page of dataSource.viewport.paginator.pages\">\r\n\r\n          <ng-container *ngIf=\"page.isVisible\">\r\n\r\n            <ng-container *ngIf=\"page.isCurrent\">\r\n              <button\r\n                (click)=\"goTo(page.number)\"\r\n                aria-current=\"page\"\r\n                class=\"z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border border-solid text-sm font-medium\">\r\n                {{ page.number }}\r\n              </button>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!page.isCurrent\">\r\n              <button\r\n                (click)=\"goTo(page.number)\"\r\n                class=\"bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 cursor-pointer border border-solid text-sm font-medium\">\r\n                {{ page.number }}\r\n              </button>\r\n            </ng-container>\r\n\r\n          </ng-container>\r\n\r\n            <ng-container *ngIf=\"page.showEllipsis\">\r\n              <span class=\"relative inline-flex items-center px-4 py-2 border border-solid border-gray-300 bg-white text-sm font-medium text-gray-700\"> ... </span>\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n        <button\r\n          (click)=\"next()\"\r\n          [disabled]=\"dataSource.viewport.paginator.nextPage == null\"\r\n          [ngClass]=\"{ 'cursor-not-allowed': dataSource.viewport.paginator.nextPage == null }\"\r\n          class=\"relative inline-flex items-center px-2 py-2 rounded-r-md cursor-pointer border border-solid border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50\">\r\n\r\n          <span class=\"sr-only\">{{ state.locale.paginator.next }}</span>\r\n          <!-- Heroicon name: solid/chevron-right -->\r\n\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n\r\n      </nav>\r\n    </div>\r\n  </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: PaginationComponent, decorators: [{
            type: Component,
            args: [{ selector: 'et-pagination', template: "<div class=\"bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6\">\r\n\r\n  <div *ngIf=\"state.paginator.isVisible\" class=\"flex-1 flex justify-between sm:hidden\">\r\n\r\n    <button\r\n      (click)=\"previous()\"\r\n      [disabled]=\"dataSource.viewport.paginator.prePage == null\"\r\n      [ngClass]=\"{ 'cursor-not-allowed': dataSource.viewport.paginator.prePage == null }\"\r\n      class=\"relative inline-flex items-center px-4 py-2 cursor-pointer border border-solid border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50\">\r\n      {{ state.locale.paginator.previous }}\r\n    </button>\r\n\r\n    <button\r\n      (click)=\"next()\"\r\n      [disabled]=\"dataSource.viewport.paginator.nextPage == null\"\r\n      [ngClass]=\"{ 'cursor-not-allowed': dataSource.viewport.paginator.nextPage == null }\"\r\n      class=\"ml-3 relative inline-flex items-center px-4 py-2 cursor-pointer border border-solid border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50\">\r\n      {{ state.locale.paginator.next }}\r\n    </button>\r\n\r\n  </div>\r\n\r\n  <div class=\"hidden sm:flex-1 sm:flex sm:items-center sm:justify-between\">\r\n\r\n    <div>\r\n      <p class=\"text-sm text-gray-700\">\r\n\r\n        <ng-container *ngIf=\"state.paginator.isVisible\">\r\n          {{ state.locale.paginator.showing }}\r\n          <span class=\"font-medium\">{{ dataSource.viewport.paginator.showing }}</span>\r\n          {{ state.locale.paginator.to }}\r\n          <span class=\"font-medium\">{{ dataSource.viewport.paginator.to }}</span>\r\n          {{ state.locale.paginator.of }}\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"state.paginator.showResults && dataSource.viewport.paginator?.total > 0\">\r\n          <span class=\"font-medium\">{{ dataSource.viewport.paginator.total }}</span>\r\n          {{ state.locale.paginator.results }}\r\n        </ng-container>\r\n\r\n      </p>\r\n\r\n    </div>\r\n\r\n    <div *ngIf=\"state.paginator.isVisible\">\r\n      <nav class=\"relative z-0 inline-flex rounded-md shadow-sm -space-x-px\" aria-label=\"Pagination\">\r\n\r\n        <button\r\n          (click)=\"previous()\"\r\n          [disabled]=\"dataSource.viewport.paginator.prePage == null\"\r\n          [ngClass]=\"{ 'cursor-not-allowed': dataSource.viewport.paginator.prePage == null }\"\r\n          class=\"relative inline-flex items-center px-2 py-2 rounded-l-md cursor-pointer border border-solid border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50\">\r\n\r\n          <span class=\"sr-only\">{{ state.locale.paginator.previous }}</span>\r\n\r\n          <!-- Heroicon name: solid/chevron-left -->\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n\r\n        <ng-container *ngFor=\"let page of dataSource.viewport.paginator.pages\">\r\n\r\n          <ng-container *ngIf=\"page.isVisible\">\r\n\r\n            <ng-container *ngIf=\"page.isCurrent\">\r\n              <button\r\n                (click)=\"goTo(page.number)\"\r\n                aria-current=\"page\"\r\n                class=\"z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border border-solid text-sm font-medium\">\r\n                {{ page.number }}\r\n              </button>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!page.isCurrent\">\r\n              <button\r\n                (click)=\"goTo(page.number)\"\r\n                class=\"bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 cursor-pointer border border-solid text-sm font-medium\">\r\n                {{ page.number }}\r\n              </button>\r\n            </ng-container>\r\n\r\n          </ng-container>\r\n\r\n            <ng-container *ngIf=\"page.showEllipsis\">\r\n              <span class=\"relative inline-flex items-center px-4 py-2 border border-solid border-gray-300 bg-white text-sm font-medium text-gray-700\"> ... </span>\r\n            </ng-container>\r\n\r\n        </ng-container>\r\n\r\n        <button\r\n          (click)=\"next()\"\r\n          [disabled]=\"dataSource.viewport.paginator.nextPage == null\"\r\n          [ngClass]=\"{ 'cursor-not-allowed': dataSource.viewport.paginator.nextPage == null }\"\r\n          class=\"relative inline-flex items-center px-2 py-2 rounded-r-md cursor-pointer border border-solid border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50\">\r\n\r\n          <span class=\"sr-only\">{{ state.locale.paginator.next }}</span>\r\n          <!-- Heroicon name: solid/chevron-right -->\r\n\r\n          <svg class=\"h-5 w-5\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\">\r\n            <path fill-rule=\"evenodd\" d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\" clip-rule=\"evenodd\" />\r\n          </svg>\r\n        </button>\r\n\r\n      </nav>\r\n    </div>\r\n  </div>\r\n</div>" }]
        }], ctorParameters: () => [], propDecorators: { state: [{
                type: Input
            }], dataSource: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 