ui-lit/pagination/index.js

UI Elements on LIT

import { __decorate } from "tslib";
import { customElement, property } from 'lit/decorators.js';
import { LitElement, html } from 'lit';
import '../icon';
import '../number';
import { paginationStyles } from './style';
let LitPagination = class LitPagination extends LitElement {
    constructor() {
        super(...arguments);
        this.pageLength = 5;
        this._page = 0;
        this._length = 20;
    }
    static get properties() {
        return {
            length: { type: Number },
            page: { type: Number },
        };
    }
    set page(value) {
        //this._page = value;
        const oldValue = this._page;
        this._page = this._calcPage(value);
        this.requestUpdate('page', oldValue);
    }
    get page() {
        return this._page;
    }
    get length() {
        return this._length;
    }
    set length(value) {
        const oldValues = this._length;
        this._length = value;
        this.requestUpdate('length', oldValues);
        const newPage = this._calcPage(this.page);
        if (newPage !== this.page) {
            this._setPage(newPage);
        }
        /*if((this.page || 0) * this.pageLength > this.length){
            this._setPage(Math.floor(this.length / this.pageLength))
        }*/
    }
    get pageCount() {
        return Math.max(Math.ceil(this.length / this.pageLength), 0);
    }
    get pageList() {
        const pagesCount = this.pageCount - 1;
        const page = this.page || 0;
        const list = [...new Set([
                0, pagesCount,
                page,
                //this.page - 2, 
                page - 1,
                //this.page + 2, 
                page + 1,
            ])]
            .filter(n => n >= 0 && n <= pagesCount)
            .sort((a, b) => {
            if (a > b)
                return 1;
            if (a < b)
                return -1;
            return 0;
        });
        const newArr = [];
        for (let i = 0; i < list.length; i++) {
            newArr.push({
                value: list[i],
                label: (list[i] + 1).toString()
            });
            if (list[i + 1] - list[i] > 1) {
                newArr.push({
                    value: Math.round(list[i] + (list[i + 1] - list[i]) / 2),
                    label: '..'
                });
            }
        }
        return newArr;
    }
    getPage() {
        return this.page === null ? 0 : this.page + 1;
    }
    next() {
        this._setPage((this.page || 0) + 1);
    }
    prev() {
        this._setPage((this.page || 0) - 1);
    }
    _calcPage(page) {
        if ((page || 0) < 0) {
            return 0;
        }
        if (page === null) {
            return null;
        }
        if (page >= this.pageCount) {
            return this.pageCount - 1;
        }
        return page;
    }
    setPage(page) {
        var _a;
        this._setPage(page);
        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('lit-button').forEach(n => n.blur());
    }
    _setPage(page) {
        const oldValue = this.page;
        this.page = page;
        if (this.page !== oldValue) {
            this.dispatchEvent(new CustomEvent('changed', {
                detail: this.page
            }));
        }
    }
    _pagesTemplate() {
        return this.pageList.map(n => html `<lit-button 
                borderless
                type = "button"
                size = "small"
                data-page = "${n.value}"
                @click = "${this._onChange}"
                class = "${n.value === this.page ? 'selected' : ''}">${n.label}</lit-button>`);
    }
    render() {
        return html `
        <lit-button 
            borderless
            size = "small"
            @click = "${this.prev}" 
            type = "button">
            <lit-icon class = "arrow-left" icon = "arrow-down-2"></lit-icon>
        </lit-button>
        <lit-numberfield 
            type = "number"
            .min = "${1}"
            decimals = "0"
            .max = "${this.pageCount}"
            .valueAsNumber = "${this.getPage()}"
            @changed = "${this._onInputChange}"
            .decimals = "${0}"
        ></lit-numberfield>                
        <lit-button 
            @click = "${this.next}" 
            borderless
            size = "small"
            type = "button">
            <lit-icon class = "arrow-right" icon = "arrow-down-2"></lit-icon>
        </lit-button>
        <div class = "page-list">${this._pagesTemplate()}</div>`;
    }
    _onChange(e) {
        const page = Number(e.target.dataset.page);
        this._setPage(page);
    }
    _onInputChange(e) {
        if (!e.detail) {
            this._setPage(null);
        }
        else {
            this._setPage(e.detail - 1);
        }
    }
};
LitPagination.styles = paginationStyles;
__decorate([
    property({ type: Number })
], LitPagination.prototype, "pageLength", void 0);
LitPagination = __decorate([
    customElement("lit-pagination")
], LitPagination);
export { LitPagination };