import * as i0 from '@angular/core';
import { EventEmitter, inject, booleanAttribute, Output, Input, HostBinding, Component } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';
import { takeUntil, distinctUntilChanged } from 'rxjs/operators';
import { DecimalPipe, AsyncPipe } from '@angular/common';
import * as i5 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i2 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i3 from '@eui/components/eui-button';
import { EUI_BUTTON } from '@eui/components/eui-button';
import * as i4 from '@eui/components/eui-select';
import { EUI_SELECT } from '@eui/components/eui-select';

/**
 * @description
 * The eui-paginator component is in charge of the pagination by splitting up content or data into several pages and adding visual controls for better user experience like:
 * - identifying the current page: clearly identify which page the user is on by displaying the current page number.
 * - providing context into how many pages there are in total: can help provide clarity around the data displayed.
 * - providing various options for navigating: previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data.
 * - items per page: allows selecting the amount of data displayed per page.
 *
 *  Best practices & Usage
 * Generally, pagination is recommended to be used if there are more than 25 items displayed in one view. The default number of displayed items may vary depending on the context.
 *
 * The main benefits of using pagination:
 * - delivers structure and feedback over the displayed data
 * - supports embedded navigation (and in particular back and forward, first and last)
 * - pagination is accessible (see A11Y)
 * - pagination typically means smaller, shorter pages and as a result reduced load times
 * - compared to infinite scroll display, it helps to focus the user's mind and not continue to offer more and more choices.
 *
 * @usageNotes
 * ### Basic usage
 * ```html
 * <eui-paginator
 *   [length]="totalItems"
 *   [pageSize]="10"
 *   (pageChange)="onPageChange($event)">
 * </eui-paginator>
 * ```
 *
 * ### With page number navigation
 * ```html
 * <eui-paginator
 *   [length]="100"
 *   [page]="currentPage"
 *   [hasPageNumberNavigation]="true"
 *   [nbPageNumberNavigation]="5">
 * </eui-paginator>
 * ```
 *
 * ### Basic mode (minimal UI)
 * ```html
 * <eui-paginator [length]="50" [isBasicMode]="true"></eui-paginator>
 * ```
 *
 * ### Accessibility
 * - Navigation buttons have descriptive labels for screen readers
 * - Current page and total pages announced to assistive technologies
 * - Keyboard navigable with standard tab and enter interactions
 * - Page size selector is a standard accessible dropdown
 *
 * ### Notes
 * - Use `hasDynamicLength` when total items count changes during pagination
 * - Page numbers are zero-indexed internally but displayed as 1-indexed
 * - Hide with `isHidden` when only one page exists
 * - Customize page size options via `pageSizeOptions` array
 */
class EuiPaginatorComponent {
    constructor() {
        /**
         * Sets the `data-e2e` attribute for the host element.
         *
         * @default 'eui-paginator'
         */
        this.e2eAttr = 'eui-paginator';
        /**
         * Sets the page size options that will be displayed in the dropdown.
         *
         * @default [5, 10, 25, 50, 100]
         */
        this.pageSizeOptions = [5, 10, 25, 50, 100];
        /**
         * Sets the number of items displayed in the page.
         *
         * @default 10
         */
        this.pageSize = 10;
        /**
         * Sets the current page number.
         *
         * @default 0
         */
        this.page = 0;
        /**
         * Sets the total number of items.
         *
         * @default 0
         */
        this.length = 0;
        /**
         * In combination with `hasPageNumberNavigation`, sets the number of page numbers displayed in the paginator.
         *
         * @default 5
         */
        this.nbPageNumberNavigation = 5;
        /**
         * Whether the paginator is hidden or not.
         *
         * @default false (visible)
         */
        this.isHidden = false;
        /**
         * Whether the paginator is in basic mode or not.
         * In this mode, the paginator will only display the previous and next buttons.
         *
         * @default false
         */
        this.isBasicMode = false;
        /**
         * Whether the page number is displayed or not.
         *
         * @default false
         */
        this.hasPageNumberNavigation = false;
        /**
         * Whether the page number is displayed or not.
         *
         * @default false
         */
        this.hasPageNumberNavigationCompact = false;
        /**
         * Whether the datasource length is dynamic or not.
         *
         * @default false
         */
        this.hasDynamicLength = false;
        /**
         * Whether the page size is displayed or not. Default: true.
         *
         * @default true
         */
        this.hasPageSize = true;
        /** Event emitted when the page has changed. */
        this.pageChange = new EventEmitter();
        /**
         * Observable that emits the current page number, the page size and the number of pages.
         */
        this.page$ = new BehaviorSubject(null);
        /**
         * Observable that emits the length of the datasource
         */
        this.length$ = new BehaviorSubject(0);
        this.destroy$ = new Subject();
        this.decimal = inject(DecimalPipe);
    }
    /**
     * Sets the `class` attribute for the host element.
     *
     * @returns A string with all CSS classes applied.
     */
    get cssClasses() {
        return [
            'eui-paginator',
            this.isHidden ? 'eui-paginator--hidden' : '',
        ].join(' ').trim();
    }
    ngOnChanges(c) {
        if (c && c.length) {
            this.length$.next(c.length.currentValue);
            this.getRange();
        }
        if (c && c.page) {
            this.page$.next({ page: c.page.currentValue, pageSize: this.pageSize, nbPage: this.nbPage });
            this.getRange();
        }
        if (c && c.pageSize) {
            this.page$.next({ page: this.page, pageSize: c.pageSize.currentValue, nbPage: this.nbPage });
            this.getRange();
        }
    }
    ngOnInit() {
        if (this.length) {
            this.length$.next(this.length);
        }
        this.nbPageNumberNav = this.nbPageNumberNavigation;
        this.length$.pipe(takeUntil(this.destroy$), distinctUntilChanged()).subscribe((length) => {
            this.length = length;
            this.nbPage = Math.ceil(this.length / this.pageSize);
            if (!this.hasDynamicLength) {
                this.page = 0;
            }
            this.getRange();
            if (this.nbPage < this.nbPageNumberNavigation) {
                this.nbPageNumberNav = this.nbPage;
            }
            else {
                this.nbPageNumberNav = this.nbPageNumberNavigation;
            }
            this.page$.next({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
        });
        this.page$.next({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
    }
    ngOnDestroy() {
        this.destroy$.next(true);
        this.destroy$.unsubscribe();
    }
    /**
     * Returns the page number navigation array.
     *
     * @returns An array of page numbers.
     */
    get pageNumberNavigation() {
        const pages = [];
        for (let i = 0; i < this.nbPage; i++) {
            pages.push(i);
        }
        const delta = Math.floor(this.nbPageNumberNav / 2);
        let start = 0;
        if (this.page - delta > 0) {
            start = this.page - delta;
        }
        else {
            start = 0;
        }
        if (this.nbPage - this.page <= this.nbPageNumberNav - (delta + 1)) {
            start = this.nbPage - this.nbPageNumberNav;
        }
        if (start < 0) {
            start = 0;
        }
        const end = start + this.nbPageNumberNav;
        return pages.slice(start, end);
    }
    /**
     * Changes the page size by the one provided as parameter.
     *
     * @param size New page size.
     */
    changePageSize(size) {
        this.pageSize = parseInt(size, 10);
        this.nbPage = Math.ceil(this.length / this.pageSize);
        this.page = 0;
        this.page$.next({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
        this.getRange();
        if (this.nbPage < this.nbPageNumberNavigation) {
            this.nbPageNumberNav = this.nbPage;
        }
        else {
            this.nbPageNumberNav = this.nbPageNumberNavigation;
        }
        this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
    }
    /**
     * Sets the page number to the one provided as parameter.
     *
     * @param page New page
     * @param options
     * `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted
     */
    goToPage(page, options) {
        this.page = page;
        this.page$.next({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
        this.getRange();
        if (!options || options?.emitEvent) {
            this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
        }
    }
    /**
     * Sets the page number to 0 (first page).
     *
     * @param options
     * `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted
     */
    goFirstPage(options) {
        this.page = 0;
        this.page$.next({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
        this.getRange();
        if (!options || options?.emitEvent) {
            this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
        }
    }
    /**
     * Sets the page number to current - 1.
     */
    goPreviousPage() {
        this.page--;
        this.page$.next({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
        this.getRange();
        this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
    }
    /**
     * Sets the page number to current + 1.
     */
    goNextPage() {
        this.page++;
        this.page$.next({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
        this.getRange();
        this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
    }
    /**
     * Sets the page number to last page.
     */
    goLastPage() {
        this.page = this.nbPage - 1;
        this.page$.next({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
        this.getRange();
        this.pageChange.emit({ page: this.page, pageSize: this.pageSize, nbPage: this.nbPage });
    }
    /**
     * Gives new values to page number, page size and number of pages.
     */
    setPage(page) {
        this.page$.next(page);
    }
    /**
     * Gives new value to the length of the datasource.
     */
    setLength(length) {
        this.length$.next(length);
    }
    /**
     * Calculates the range of items displayed in the paginator.
     */
    getRange() {
        const from = this.length > 0 ? this.page * this.pageSize + 1 : 0;
        const limit = this.page * this.pageSize + this.pageSize;
        const to = limit <= this.length ? limit : this.length;
        this.range = from && to && this.length ? this.decimal.transform(from) + '–' + this.decimal.transform(to) : '';
        this.rangeLength = this.length ? this.length.toString() : '';
    }
    /**
     * Change the pagination to the given page number
     *
     * @param page 0-based page number to be displayed
     * @param options
     * `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted
     */
    getPage(page, options) {
        setTimeout(() => {
            this.goToPage(page, options);
        });
    }
    /**
     * Returns the current pagination state.
     *
     * @returns An object with the properties of the paginator state.
     */
    getCurrentPagination() {
        return {
            page: this.page,
            pageSize: this.pageSize,
            nbPage: this.nbPage,
        };
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiPaginatorComponent, isStandalone: true, selector: "eui-paginator", inputs: { e2eAttr: "e2eAttr", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", page: "page", length: "length", nbPageNumberNavigation: "nbPageNumberNavigation", isHidden: ["isHidden", "isHidden", booleanAttribute], isBasicMode: ["isBasicMode", "isBasicMode", booleanAttribute], hasPageNumberNavigation: ["hasPageNumberNavigation", "hasPageNumberNavigation", booleanAttribute], hasPageNumberNavigationCompact: ["hasPageNumberNavigationCompact", "hasPageNumberNavigationCompact", booleanAttribute], hasDynamicLength: ["hasDynamicLength", "hasDynamicLength", booleanAttribute], hasPageSize: ["hasPageSize", "hasPageSize", booleanAttribute] }, outputs: { pageChange: "pageChange" }, host: { properties: { "attr.data-e2e": "this.e2eAttr", "class": "this.cssClasses" } }, providers: [DecimalPipe], usesOnChanges: true, ngImport: i0, template: "<div class=\"eui-paginator__page\">\n    @if (!isBasicMode || hasPageSize) {\n        <div class=\"eui-paginator__page-selector-wrapper\" [class.eui-paginator__page-selector-wrapper--compact]=\"hasPageNumberNavigationCompact\">\n            <div class=\"eui-paginator__page-selector\">\n                <div>{{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}:</div>\n                <div class=\"page-size__select-wrapper\">\n                    <select euiSelect class=\"page-size__select\" ariaLabel=\"{{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\n                        @for (pageSizeOption of pageSizeOptions; track pageSizeOption) {\n                            <option value=\"{{ pageSizeOption }}\">{{ pageSizeOption }}</option>\n                        }\n                    </select>\n                </div>\n            </div>\n            @if ((length$ | async) > 0) {\n                <div class=\"eui-paginator__page-range-main\" role=\"status\">\n                    {{ 'eui.euitable.SHOWING-RANGE' | translate: { range: range } }} {{ 'eui.euitable.RANGE-LABEL' | translate }}\n                    {{ rangeLength | number }}\n                </div>\n            }\n        </div>\n    }\n</div>\n\n<nav class=\"eui-paginator__page-navigation\" [attr.aria-label]=\"'Table pagination navigation with ' + rangeLength + ' total items'\">\n    @if (isBasicMode) {\n\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to previous page\" \n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goPreviousPage()\">\n                <eui-icon-svg icon=\"eui-caret-left\" fillColor=\"primary\"/>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to next page\" \n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goNextPage()\">\n                <eui-icon-svg icon=\"eui-caret-right\" fillColor=\"primary\"/>\n            </button>\n        </div>\n\n    } @else {\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to first page\" \n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goFirstPage()\">\n                <eui-icon-svg icon=\"eui-caret-first\" fillColor=\"primary\"/>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to previous page\" \n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goPreviousPage()\">\n                <eui-icon-svg icon=\"eui-caret-left\" fillColor=\"primary\"/>\n            </button>\n        </div>\n        @if (hasPageNumberNavigation) {\n        <div class=\"eui-paginator__page-navigation-numbers\">\n            @for (pageNumber of pageNumberNavigation; track pageNumber) {\n            <button\n                type=\"button\"\n                [attr.aria-current]=\"pageNumber === page\"\n                euiSizeS\n                euiButton\n                euiBasicButton\n                [euiPrimary]=\"pageNumber === page\"\n                [euiOutline]=\"pageNumber === page\"\n                (click)=\"goToPage(pageNumber)\">\n                {{ pageNumber + 1 | number }}\n            </button>\n            }\n        </div>\n        }\n        @if ((length$ | async) > 0) {\n        <div class=\"eui-paginator__page-range\">\n            {{ range }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n        </div>\n        }\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to next page\" \n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goNextPage()\">\n                <eui-icon-svg icon=\"eui-caret-right\" fillColor=\"primary\"/>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to last page\" \n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goLastPage()\">\n                <eui-icon-svg icon=\"eui-caret-last\" fillColor=\"primary\"/>\n            </button>\n        </div>\n    }\n</nav>\n\n", styles: [".eui-21 :host.eui-paginator{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-s-s) 0;position:relative;width:100%}.eui-21 :host.eui-paginator .eui-paginator__page{display:flex;flex-direction:column;font:var(--eui-f-l)}.eui-21 :host.eui-paginator .eui-paginator__page-selector-wrapper{display:flex;flex-wrap:wrap;flex-direction:column}.eui-21 :host.eui-paginator .eui-paginator__page-selector-wrapper--compact{flex-direction:row;align-items:center;gap:var(--eui-s-s)}.eui-21 :host.eui-paginator .eui-paginator__page-selector{align-items:center;display:flex;flex-wrap:wrap;font:var(--eui-f-s)}.eui-21 :host.eui-paginator .eui-paginator__page-selector .page-size__select-wrapper{padding-left:var(--eui-s-xs)}.eui-21 :host.eui-paginator .eui-paginator__page-selector .page-size__select{font-size:100%;min-height:var(--eui-s-xl);padding-bottom:0;padding-top:0}.eui-21 :host.eui-paginator .eui-paginator__page-range{align-items:center;font:var(--eui-f-s);display:none}.eui-21 :host.eui-paginator .eui-paginator__page-range-main{align-items:center;font:var(--eui-f-s)}.eui-21 :host.eui-paginator .eui-paginator__page-navigation{align-items:center;display:flex}.eui-21 :host.eui-paginator .eui-paginator__page-navigation-item{align-items:center;display:inline-flex}.eui-21 :host.eui-paginator .eui-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-21 :host.eui-paginator.eui-paginator--hidden{display:none}@media screen and (max-width:767px){.eui-21 :host.eui-paginator{align-items:center;display:flex;justify-content:center;margin:var(--eui-s-s) 0;width:100%}.eui-21 :host.eui-paginator .eui-paginator__page{display:none}.eui-21 :host.eui-paginator .eui-paginator__page-range{display:inline-flex;margin:0 var(--eui-s-m)}.eui-21 :host.eui-paginator .eui-paginator__page-navigation-numbers{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "component", type: i3.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiCTAButton", "euiBlockButton", "euiIconButton", "euiAvatarButton", "euiLineWrap", "isCompact", "hasNoFocusRing", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i4.EuiSelectComponent, selector: "select[euiSelect]", inputs: ["ariaLabel", "placeholder", "readonly", "isInvalid"] }, { kind: "directive", type: i4.EuiNgSelectOptionDirective, selector: "option:not([eclSelectOption]):not([eclMultiselectOption]), option[euiOption]", inputs: ["selected", "label", "ngValue"] }, { kind: "directive", type: i4.EuiSelectControlValueAccessor, selector: "select:not([multiple])[formControlName][euiSelect],select:not([multiple])[formControl][euiSelect],select:not([multiple])[ngModel][euiSelect]", inputs: ["placeholder"] }, { kind: "directive", type: i4.EuiSelectMultipleOption, selector: "option, option[euiOption]", inputs: ["ngValue", "value"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiPaginatorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-paginator', imports: [
                        DecimalPipe,
                        AsyncPipe,
                        TranslateModule,
                        FormsModule,
                        ...EUI_ICON,
                        ...EUI_BUTTON,
                        ...EUI_SELECT,
                    ], providers: [DecimalPipe], template: "<div class=\"eui-paginator__page\">\n    @if (!isBasicMode || hasPageSize) {\n        <div class=\"eui-paginator__page-selector-wrapper\" [class.eui-paginator__page-selector-wrapper--compact]=\"hasPageNumberNavigationCompact\">\n            <div class=\"eui-paginator__page-selector\">\n                <div>{{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}:</div>\n                <div class=\"page-size__select-wrapper\">\n                    <select euiSelect class=\"page-size__select\" ariaLabel=\"{{ 'eui.euitable.ITEMS-PER-PAGE' | translate }}\" [(ngModel)]=\"pageSize\" (ngModelChange)=\"changePageSize($event)\">\n                        @for (pageSizeOption of pageSizeOptions; track pageSizeOption) {\n                            <option value=\"{{ pageSizeOption }}\">{{ pageSizeOption }}</option>\n                        }\n                    </select>\n                </div>\n            </div>\n            @if ((length$ | async) > 0) {\n                <div class=\"eui-paginator__page-range-main\" role=\"status\">\n                    {{ 'eui.euitable.SHOWING-RANGE' | translate: { range: range } }} {{ 'eui.euitable.RANGE-LABEL' | translate }}\n                    {{ rangeLength | number }}\n                </div>\n            }\n        </div>\n    }\n</div>\n\n<nav class=\"eui-paginator__page-navigation\" [attr.aria-label]=\"'Table pagination navigation with ' + rangeLength + ' total items'\">\n    @if (isBasicMode) {\n\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to previous page\" \n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goPreviousPage()\">\n                <eui-icon-svg icon=\"eui-caret-left\" fillColor=\"primary\"/>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to next page\" \n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goNextPage()\">\n                <eui-icon-svg icon=\"eui-caret-right\" fillColor=\"primary\"/>\n            </button>\n        </div>\n\n    } @else {\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to first page\" \n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goFirstPage()\">\n                <eui-icon-svg icon=\"eui-caret-first\" fillColor=\"primary\"/>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to previous page\" \n                [euiDisabled]=\"page === 0 || length === 0\"\n                (click)=\"goPreviousPage()\">\n                <eui-icon-svg icon=\"eui-caret-left\" fillColor=\"primary\"/>\n            </button>\n        </div>\n        @if (hasPageNumberNavigation) {\n        <div class=\"eui-paginator__page-navigation-numbers\">\n            @for (pageNumber of pageNumberNavigation; track pageNumber) {\n            <button\n                type=\"button\"\n                [attr.aria-current]=\"pageNumber === page\"\n                euiSizeS\n                euiButton\n                euiBasicButton\n                [euiPrimary]=\"pageNumber === page\"\n                [euiOutline]=\"pageNumber === page\"\n                (click)=\"goToPage(pageNumber)\">\n                {{ pageNumber + 1 | number }}\n            </button>\n            }\n        </div>\n        }\n        @if ((length$ | async) > 0) {\n        <div class=\"eui-paginator__page-range\">\n            {{ range }} {{ 'eui.euitable.RANGE-LABEL' | translate }} {{ rangeLength }}\n        </div>\n        }\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to next page\" \n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goNextPage()\">\n                <eui-icon-svg icon=\"eui-caret-right\" fillColor=\"primary\"/>\n            </button>\n        </div>\n        <div class=\"eui-paginator__page-navigation-item\">\n            <button\n                type=\"button\"\n                euiSizeS\n                euiButton\n                euiIconButton\n                euiBasicButton\n                aria-label=\"Go to last page\" \n                [euiDisabled]=\"page + 1 === nbPage || length === 0\"\n                (click)=\"goLastPage()\">\n                <eui-icon-svg icon=\"eui-caret-last\" fillColor=\"primary\"/>\n            </button>\n        </div>\n    }\n</nav>\n\n", styles: [".eui-21 :host.eui-paginator{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:var(--eui-s-s) 0;position:relative;width:100%}.eui-21 :host.eui-paginator .eui-paginator__page{display:flex;flex-direction:column;font:var(--eui-f-l)}.eui-21 :host.eui-paginator .eui-paginator__page-selector-wrapper{display:flex;flex-wrap:wrap;flex-direction:column}.eui-21 :host.eui-paginator .eui-paginator__page-selector-wrapper--compact{flex-direction:row;align-items:center;gap:var(--eui-s-s)}.eui-21 :host.eui-paginator .eui-paginator__page-selector{align-items:center;display:flex;flex-wrap:wrap;font:var(--eui-f-s)}.eui-21 :host.eui-paginator .eui-paginator__page-selector .page-size__select-wrapper{padding-left:var(--eui-s-xs)}.eui-21 :host.eui-paginator .eui-paginator__page-selector .page-size__select{font-size:100%;min-height:var(--eui-s-xl);padding-bottom:0;padding-top:0}.eui-21 :host.eui-paginator .eui-paginator__page-range{align-items:center;font:var(--eui-f-s);display:none}.eui-21 :host.eui-paginator .eui-paginator__page-range-main{align-items:center;font:var(--eui-f-s)}.eui-21 :host.eui-paginator .eui-paginator__page-navigation{align-items:center;display:flex}.eui-21 :host.eui-paginator .eui-paginator__page-navigation-item{align-items:center;display:inline-flex}.eui-21 :host.eui-paginator .eui-paginator__page-navigation-numbers{align-items:center;display:inline-flex}.eui-21 :host.eui-paginator.eui-paginator--hidden{display:none}@media screen and (max-width:767px){.eui-21 :host.eui-paginator{align-items:center;display:flex;justify-content:center;margin:var(--eui-s-s) 0;width:100%}.eui-21 :host.eui-paginator .eui-paginator__page{display:none}.eui-21 :host.eui-paginator .eui-paginator__page-range{display:inline-flex;margin:0 var(--eui-s-m)}.eui-21 :host.eui-paginator .eui-paginator__page-navigation-numbers{display:none}}\n"] }]
        }], propDecorators: { e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], pageSizeOptions: [{
                type: Input
            }], pageSize: [{
                type: Input
            }], page: [{
                type: Input
            }], length: [{
                type: Input
            }], nbPageNumberNavigation: [{
                type: Input
            }], isHidden: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isBasicMode: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasPageNumberNavigation: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasPageNumberNavigationCompact: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasDynamicLength: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasPageSize: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], pageChange: [{
                type: Output
            }] } });

const EUI_PAGINATOR = [EuiPaginatorComponent];
// export { EuiPaginatorComponent as EuiPaginator } from './eui-paginator.component';

/**
 * Generated bundle index. Do not edit.
 */

export { EUI_PAGINATOR, EuiPaginatorComponent };
//# sourceMappingURL=eui-components-eui-paginator.mjs.map
