import { Component, EventEmitter, Input, Output } from '@angular/core';
import { coerceNumberProperty, } from '@angular/cdk/coercion';
import { MAT_SELECT_CONFIG } from '@angular/material/select';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../../services/translation-registry.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/icon";
import * as i4 from "@angular/material/form-field";
import * as i5 from "@angular/material/select";
import * as i6 from "@angular/material/core";
import * as i7 from "../../directives/form.directive";
import * as i8 from "../button/button";
const DEFAULT_PAGE_SIZE = 50;
export var PaginationSize;
(function (PaginationSize) {
    PaginationSize["small"] = "small";
    PaginationSize["medium"] = "medium";
    PaginationSize["large"] = "large";
    PaginationSize["mobile"] = "mobile";
})(PaginationSize || (PaginationSize = {}));
export class QMSPaginatorComponent {
    get pageSizeOptions() {
        return this._pageSizeOptions;
    }
    set pageSizeOptions(value) {
        this._pageSizeOptions = (value || []).map(p => coerceNumberProperty(p));
    }
    get pageSize() {
        return this._pageSize;
    }
    set pageSize(value) {
        this._pageSize = Math.max(coerceNumberProperty(value), 0);
        this._updateDisplayedPageSizeOptions();
    }
    get length() {
        return this._length;
    }
    set length(value) {
        this._length = coerceNumberProperty(value);
        this.getNumberOfPages();
    }
    get pageIndex() {
        return this._pageIndex + 1;
    }
    set pageIndex(value) {
        this.previousPageIndex = this._pageIndex;
        this._pageIndex = Math.max(coerceNumberProperty(value - (this.isFirstLoad ? 0 : 1)), 0);
        this.displayNumberOfPages = this.pagination(this._pageIndex, this.numberOfPages.length);
        this.getNumberOfPages();
    }
    set overlayClass(value) {
        this._overlayPanelClass = value;
    }
    get overlayClass() {
        const defaultClass = ['qms-select-panel'];
        if (typeof (this._overlayPanelClass) === 'string')
            return [...defaultClass, this._overlayPanelClass];
        if (Array.isArray(this._overlayPanelClass))
            return [...defaultClass, ...this._overlayPanelClass];
        return defaultClass;
    }
    constructor(trans) {
        this.trans = trans;
        this.sizeMedium = 'medium';
        this.sizeSmall = 'small';
        this.sizeLarge = 'large';
        this.sizeMobile = 'mobile';
        this.numHidden = 10;
        this.size = PaginationSize.large;
        this._pageSizeOptions = [5, 10, 25, 100];
        this._pageSize = 10;
        this._length = 0;
        this._pageIndex = 0;
        this.page = new EventEmitter();
        this.previousPageIndex = 0;
        this.numberOfPages = [];
        this.displayNumberOfPages = [];
        this.isFirstLoad = true;
        this.ngUnsubscribe = new Subject();
    }
    ngOnInit() {
        const langDefault = 'en';
        this.trans.getLanguageSubject$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
            this.LANG = this.trans.getObjectLang(res || langDefault);
        });
        this.getNumberOfPages();
        this.isFirstLoad = false;
    }
    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
    _updateDisplayedPageSizeOptions() {
        if (!this.pageSize) {
            this._pageSize =
                this.pageSizeOptions.length != 0 ? this.pageSizeOptions[0] : DEFAULT_PAGE_SIZE;
        }
    }
    getNumberOfPages() {
        if (!this.pageSize) {
            return;
        }
        this.numberOfPages = [];
        const Arrlength = Math.ceil(this._length / this._pageSize);
        for (let index = 1; index <= Arrlength; index++) {
            this.numberOfPages.push(index);
        }
        this.minPage = 1;
        this.maxpage = this.numberOfPages.length ? this.numberOfPages.length : 1;
        this.renderDisplayNumberOfpages();
    }
    renderDisplayNumberOfpages() {
        if (this.numberOfPages.length <= 5) {
            this.displayNumberOfPages = this.numberOfPages.map(x => x.toString());
            return;
        }
        this.displayNumberOfPages = this.numberOfPages.map(x => x.toString());
        this.displayNumberOfPages = this.pagination(this.pageIndex, this.numberOfPages.length);
    }
    changePage(page) {
        this.pageIndex = page;
        this._emitPageEvent(this.previousPageIndex);
        this.displayNumberOfPages = this.pagination(parseInt(page.toString()), this.numberOfPages.length);
    }
    pagination(c, m) {
        let current = c;
        let last = m;
        let delta = 1;
        if (current == this.minPage || current == this.maxpage) {
            delta = 3;
        }
        else if (current == (this.minPage + 1)) {
            delta = 2;
        }
        else if (current == (this.maxpage - 1)) {
            delta = 2;
        }
        let left = current - delta;
        let right = current + delta + 1;
        let range = [];
        let rangeWithDots = [];
        let l;
        for (let i = 1; i <= last; i++) {
            if (i == 1 || i == last || i >= left && i < right) {
                range.push(i);
            }
        }
        for (let i of range) {
            if (l) {
                if (i - l !== 1) {
                    rangeWithDots.push('...');
                }
            }
            rangeWithDots.push(i);
            l = i;
        }
        return rangeWithDots;
    }
    nextPage() {
        this.previousPageIndex = this.pageIndex;
        this.pageIndex = this.pageIndex + 1;
        this._emitPageEvent(this.previousPageIndex);
        this.displayNumberOfPages = this.pagination(this.pageIndex, this.numberOfPages.length);
    }
    previousPage() {
        this.previousPageIndex = this.pageIndex;
        this.pageIndex = this.pageIndex - 1;
        this._emitPageEvent(this.previousPageIndex);
        this.displayNumberOfPages = this.pagination(this.pageIndex, this.numberOfPages.length);
    }
    _changePageSize(pageSize) {
        const startIndex = this._pageIndex * this.pageSize;
        const previousPageIndex = this._pageIndex;
        this.previousPageIndex = previousPageIndex;
        this.pageIndex = (Math.floor(startIndex / pageSize) || 0) + 1;
        this.pageSize = pageSize;
        this._emitPageEvent(this.previousPageIndex);
        this.getNumberOfPages();
    }
    _changePageNumber(pageNumber) {
        this.previousPageIndex = this.pageIndex;
        this.pageIndex = pageNumber;
        this._emitPageEvent(this.previousPageIndex);
        this.getNumberOfPages();
    }
    _emitPageEvent(previousPageIndex) {
        this.page.emit({
            previousPageIndex,
            pageIndex: this._pageIndex,
            pageSize: this.pageSize,
            length: this.length,
        });
    }
    ngAfterViewChecked() {
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSPaginatorComponent, deps: [{ token: i1.TranslateLibraryService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSPaginatorComponent, selector: "qms-paginator", inputs: { numHidden: "numHidden", size: "size", pageSizeOptions: "pageSizeOptions", pageSize: "pageSize", length: "length", pageIndex: "pageIndex", overlayClass: ["overlayPanelClass", "overlayClass"] }, outputs: { page: "page" }, host: { classAttribute: "qms-paginator" }, providers: [
            {
                provide: MAT_SELECT_CONFIG,
                useValue: { overlayPanelClass: 'customCDKpanel' },
            },
        ], ngImport: i0, template: "<div class=\"qms-paginator-outer-container\" [class.size-small]='size == sizeSmall' [class.d-none]='numHidden > length'>\n    <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\n        <div class=\"qms-total-result\" [class.mr-b-size-small]='size == sizeSmall'>\n            <span>{{LANG.RESULTS}}: {{length}}</span>\n        </div>\n        <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n            <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n            <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n                <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n                    (selectionChange)=\"_changePageSize($event.value)\" qms-select disableOptionCentering>\n                    <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n                        {{ item }}\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n        </div>\n        <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n            <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n\n            <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n                appearance=\"fill\">\n                <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n                    (selectionChange)=\"_changePageNumber($event.value)\" qms-select disableOptionCentering>\n                    <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n                        {{ item }}\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n        </div>\n        <div class=\"qms-paginator-range-actions\">\n            <ul class=\"nav-list-pagination\">\n                <li class=\"nav-item\">\n                    <button aria-label=\"Previous page\" qms-btn-icon color=\"light\" (click)='previousPage()'\n                        [disabled]='minPage == pageIndex'>\n                        <mat-icon>chevron_left</mat-icon>\n                    </button>\n                </li>\n                <ng-container *ngFor='let item of displayNumberOfPages'>\n                    <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n                    <li class=\"nav-item\">\n                        <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\" [class.selected]='pageIndex == item'\n                            [disabled]='pageIndex == item' (click)='changePage(item)'>\n                            {{item}}\n                        </button>\n                    </li>\n                </ng-container>\n                <li class=\"nav-item\">\n                    <button aria-label=\"Next page\" qms-btn-icon color=\"light\" (click)='nextPage()'\n                        [disabled]='maxpage == pageIndex'>\n                        <mat-icon>chevron_right</mat-icon>\n                    </button>\n                </li>\n            </ul>\n        </div>\n    </div>\n\n    <div class=\"mat-paginator-container-mobile\" *ngIf='size == sizeMobile'>\n        <div class=\"mat-paginator-container\" *ngIf='size == sizeMobile'>\n            <div class=\"qms-paginator-range-actions\">\n                <ul class=\"nav-list-pagination\">\n                    <li class=\"nav-item\">\n                        <button aria-label=\"Previous page\" qms-btn-icon color=\"light\" (click)='previousPage()'\n                            [disabled]='minPage == pageIndex'>\n                            <mat-icon>chevron_left</mat-icon>\n                        </button>\n                    </li>\n                    <ng-container *ngFor='let item of displayNumberOfPages'>\n                        <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n                        <li class=\"nav-item\">\n                            <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\"\n                                [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\n                                (click)='changePage(item)'>\n                                {{item}}\n                            </button>\n                        </li>\n                    </ng-container>\n                    <li class=\"nav-item\">\n                        <button aria-label=\"Next page\" qms-btn-icon color=\"light\" (click)='nextPage()'\n                            [disabled]='maxpage == pageIndex'>\n                            <mat-icon>chevron_right</mat-icon>\n                        </button>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"qms-total-result\">\n            <span>{{LANG.RESULTS}}: {{length}}</span>\n        </div>\n        <div style=\"display: flex;\">\n            <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n                <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n                <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n                    <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n                        (selectionChange)=\"_changePageSize($event.value)\" qms-select>\n                        <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n                            {{ item }}\n                        </mat-option>\n                    </mat-select>\n                </mat-form-field>\n            </div>\n            <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n                <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n                <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n                    appearance=\"fill\">\n                    <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n                        (selectionChange)=\"_changePageNumber($event.value)\" qms-select>\n                        <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n                            {{ item }}\n                        </mat-option>\n                    </mat-select>\n                </mat-form-field>\n            </div>\n        </div>\n\n    </div>\n\n</div>", styles: ["::ng-deep .customCDKpanel{transform:none!important}::ng-deep .qms-paginator{display:block}::ng-deep .qms-paginator .qms-paginator-outer-container{display:flex}::ng-deep .qms-paginator .mat-paginator-container{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;flex-wrap:wrap-reverse;width:100%}::ng-deep .qms-paginator .mat-paginator-container .qms-btn-icon{width:40px;height:40px;line-height:40px}::ng-deep .qms-paginator .mat-paginator-container .mat-mdc-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:21px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-family:Open Sans;font-weight:400;font-size:14px;line-height:22px;color:#0009}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:14px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-page-size .mat-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper{width:55px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:4px;border-top:0px;padding-bottom:0;height:25px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{display:flex;align-items:center;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .selected{background-color:#e5eefb;color:#1954a9}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .qms-3d{font-weight:600;font-size:14px;line-height:22px;color:#323232}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions button:not(.qms-btn-disabled) .qms-btn-icon-wrapper{color:#323232}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .nav-list-pagination{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;margin:0;list-style:none}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .nav-list-pagination .nav-item button.qms-btn-icon{line-height:1.43;letter-spacing:.01071em;border-radius:20px;text-align:center;box-sizing:border-box;min-width:40px;width:unset;height:40px;padding:0 5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-mdc-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result{margin-bottom:16px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result span{font-family:Open Sans;font-style:normal;font-weight:400;font-size:12px;line-height:16px;color:#0009}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:12px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-page-size .mat-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:4px;border-top:0px;padding-bottom:0;height:25px}::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mr-b-size-small{margin-bottom:17px!important}::ng-deep div.mat-mdc-select-panel{min-width:fit-content!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7.QMSFormFieldDirective, selector: "[qms-form]" }, { kind: "component", type: i8.QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSPaginatorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'qms-paginator', host: {
                        'class': 'qms-paginator'
                    }, providers: [
                        {
                            provide: MAT_SELECT_CONFIG,
                            useValue: { overlayPanelClass: 'customCDKpanel' },
                        },
                    ], template: "<div class=\"qms-paginator-outer-container\" [class.size-small]='size == sizeSmall' [class.d-none]='numHidden > length'>\n    <div class=\"mat-paginator-container\" *ngIf='size != sizeMobile'>\n        <div class=\"qms-total-result\" [class.mr-b-size-small]='size == sizeSmall'>\n            <span>{{LANG.RESULTS}}: {{length}}</span>\n        </div>\n        <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n            <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n            <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n                <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n                    (selectionChange)=\"_changePageSize($event.value)\" qms-select disableOptionCentering>\n                    <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n                        {{ item }}\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n        </div>\n        <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n            <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n\n            <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n                appearance=\"fill\">\n                <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n                    (selectionChange)=\"_changePageNumber($event.value)\" qms-select disableOptionCentering>\n                    <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n                        {{ item }}\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n        </div>\n        <div class=\"qms-paginator-range-actions\">\n            <ul class=\"nav-list-pagination\">\n                <li class=\"nav-item\">\n                    <button aria-label=\"Previous page\" qms-btn-icon color=\"light\" (click)='previousPage()'\n                        [disabled]='minPage == pageIndex'>\n                        <mat-icon>chevron_left</mat-icon>\n                    </button>\n                </li>\n                <ng-container *ngFor='let item of displayNumberOfPages'>\n                    <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n                    <li class=\"nav-item\">\n                        <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\" [class.selected]='pageIndex == item'\n                            [disabled]='pageIndex == item' (click)='changePage(item)'>\n                            {{item}}\n                        </button>\n                    </li>\n                </ng-container>\n                <li class=\"nav-item\">\n                    <button aria-label=\"Next page\" qms-btn-icon color=\"light\" (click)='nextPage()'\n                        [disabled]='maxpage == pageIndex'>\n                        <mat-icon>chevron_right</mat-icon>\n                    </button>\n                </li>\n            </ul>\n        </div>\n    </div>\n\n    <div class=\"mat-paginator-container-mobile\" *ngIf='size == sizeMobile'>\n        <div class=\"mat-paginator-container\" *ngIf='size == sizeMobile'>\n            <div class=\"qms-paginator-range-actions\">\n                <ul class=\"nav-list-pagination\">\n                    <li class=\"nav-item\">\n                        <button aria-label=\"Previous page\" qms-btn-icon color=\"light\" (click)='previousPage()'\n                            [disabled]='minPage == pageIndex'>\n                            <mat-icon>chevron_left</mat-icon>\n                        </button>\n                    </li>\n                    <ng-container *ngFor='let item of displayNumberOfPages'>\n                        <li class=\"nav-item\"> <span *ngIf='item == \"...\"' class=\"qms-3d\">{{item}}</span></li>\n                        <li class=\"nav-item\">\n                            <button *ngIf='item != \"...\"' qms-btn-icon color=\"light\"\n                                [class.selected]='pageIndex == item' [disabled]='pageIndex == item'\n                                (click)='changePage(item)'>\n                                {{item}}\n                            </button>\n                        </li>\n                    </ng-container>\n                    <li class=\"nav-item\">\n                        <button aria-label=\"Next page\" qms-btn-icon color=\"light\" (click)='nextPage()'\n                            [disabled]='maxpage == pageIndex'>\n                            <mat-icon>chevron_right</mat-icon>\n                        </button>\n                    </li>\n                </ul>\n            </div>\n        </div>\n        <div class=\"qms-total-result\">\n            <span>{{LANG.RESULTS}}: {{length}}</span>\n        </div>\n        <div style=\"display: flex;\">\n            <div class=\"qms-paginator-page-size\" *ngIf='size != sizeSmall'>\n                <div class=\"qms-pagesize-label\">{{LANG.ROW_PER_PAGE}}:</div>\n                <mat-form-field qms-form qms-select-input class=\"qms-form-page-size\" appearance=\"fill\">\n                    <mat-select [panelClass]=\"overlayClass\" [value]=\"pageSize\"\n                        (selectionChange)=\"_changePageSize($event.value)\" qms-select>\n                        <mat-option *ngFor=\"let item of pageSizeOptions\" [value]=\"item\">\n                            {{ item }}\n                        </mat-option>\n                    </mat-select>\n                </mat-form-field>\n            </div>\n            <div class=\"qms-paginator-page-size\" *ngIf='size != sizeMedium && size != sizeSmall'>\n                <div class=\"qms-pagesize-label \">{{LANG.JUM_TO_PAGE}}:</div>\n                <mat-form-field qms-form qms-select-input class=\"qms-form-page-size qms-form-select-page-size\"\n                    appearance=\"fill\">\n                    <mat-select [panelClass]=\"overlayClass\" [value]=\"pageIndex\"\n                        (selectionChange)=\"_changePageNumber($event.value)\" qms-select>\n                        <mat-option *ngFor=\"let item of numberOfPages\" [value]=\"item\">\n                            {{ item }}\n                        </mat-option>\n                    </mat-select>\n                </mat-form-field>\n            </div>\n        </div>\n\n    </div>\n\n</div>", styles: ["::ng-deep .customCDKpanel{transform:none!important}::ng-deep .qms-paginator{display:block}::ng-deep .qms-paginator .qms-paginator-outer-container{display:flex}::ng-deep .qms-paginator .mat-paginator-container{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;flex-wrap:wrap-reverse;width:100%}::ng-deep .qms-paginator .mat-paginator-container .qms-btn-icon{width:40px;height:40px;line-height:40px}::ng-deep .qms-paginator .mat-paginator-container .mat-mdc-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result{margin-right:24px;margin-bottom:21px}::ng-deep .qms-paginator .mat-paginator-container .qms-total-result span{font-family:Open Sans;font-weight:400;font-size:14px;line-height:22px;color:#0009}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:14px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-page-size .mat-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .jump-page .mat-form-field-wrapper{width:55px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:4px;border-top:0px;padding-bottom:0;height:25px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions{display:flex;align-items:center;margin-bottom:15px}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .selected{background-color:#e5eefb;color:#1954a9}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .qms-3d{font-weight:600;font-size:14px;line-height:22px;color:#323232}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions button:not(.qms-btn-disabled) .qms-btn-icon-wrapper{color:#323232}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .nav-list-pagination{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;margin:0;list-style:none}::ng-deep .qms-paginator .mat-paginator-container .qms-paginator-range-actions .nav-list-pagination .nav-item button.qms-btn-icon{line-height:1.43;letter-spacing:.01071em;border-radius:20px;text-align:center;box-sizing:border-box;min-width:40px;width:unset;height:40px;padding:0 5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-mdc-select .mat-select-arrow{margin-top:20px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result{margin-bottom:16px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-total-result span{font-family:Open Sans;font-style:normal;font-weight:400;font-size:12px;line-height:16px;color:#0009}::ng-deep .qms-paginator .mat-paginator-container-mobile .mat-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size{margin-right:24px;display:flex;align-items:baseline}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-pagesize-label{font-weight:400;font-size:12px;line-height:22px;color:#323232;font-family:Open Sans;font-style:normal;margin-right:8px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-page-size .mat-mdc-text-field-wrapper{width:70px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .qms-form-select-page-size .mat-mdc-text-field-wrapper{width:60px;padding-left:9px;padding-right:5px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .jump-page .mat-form-field-wrapper .mat-form-field-flex{width:55px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex{height:40px}::ng-deep .qms-paginator .mat-paginator-container-mobile .qms-paginator-page-size .mat-form-field-flex .mat-form-field-infix{padding-top:4px;border-top:0px;padding-bottom:0;height:25px}::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{justify-content:flex-start}::ng-deep .qms-paginator .mr-b-size-small{margin-bottom:17px!important}::ng-deep div.mat-mdc-select-panel{min-width:fit-content!important}\n"] }]
        }], ctorParameters: () => [{ type: i1.TranslateLibraryService }], propDecorators: { numHidden: [{
                type: Input
            }], size: [{
                type: Input
            }], pageSizeOptions: [{
                type: Input
            }], pageSize: [{
                type: Input
            }], length: [{
                type: Input
            }], pageIndex: [{
                type: Input
            }], page: [{
                type: Output
            }], overlayClass: [{
                type: Input,
                args: ['overlayPanelClass']
            }] } });
//# sourceMappingURL=data:application/json;base64, 